I just had to update to a newer version of colorbox due to deprecated jQuery.
Previously I had a colorbox linked to the submit button on a form (presenting"thanks for your message!")
Since updating colorbox, this no longer works.
This was the original code that worked with colorbox 1.3, not on colorbox 1.4
function SendMailForm(){
var dataString = $("#form1").serialize();
$.ajax({
type:"POST",
url:"sendmail.php",
data:dataString,
cache:false,
success:function(html){
$("#HiddenBox").show();
$("#HiddenBox").html(html);
$.fn.colorbox({'href':'#HiddenBox', 'open':true, 'inline':true, 'width':'600px', 'height':'200px'});
$(document).bind('cbox_closed', function(){
$("#HiddenBox").hide();
});
}
});
}
Hitting the submit button caused #HiddenBox to show using .show()
Hidden box code is pretty simple colorbox code:
<div id="HiddenBox" style='display:none'>
<span class="colorBox">Thanks for your message</span>
<p>I'll get back to your query as soon as I can!</p>
</div
Can't actually find any JS errors on the page relating to this, but it no longer launches the colorbox!
See real site here and try to fill in the form
The form:
<form id="form1" class="formular" method="post" action="Javascript:SendMailForm();">
<fieldset>
<input data-validation-placeholder="Name" class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder" placeholder="Name" data-prompt-position="topRight:-79,15" />
<br /><br />
<input data-validation-placeholder="Email" class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder" placeholder="Email" data-prompt-position="topRight:-79,15" />
<br /><br />
<textarea value="What's on your mind?" data-validation-placeholder="Message" class="validate[required] text-input message" type="text" name="message" id="reqplaceholder" class="message" placeholder="What's on your mind?" data-prompt-position="topRight:-79,15" ></textarea>
<br /><br />
<input class="button" type="submit">
</fieldset>
</form>
Sendmail:
<?php
$name = $_POST['name'] ;
$email = $_POST['email'] ;
$message = $_POST['message'] ;
if(mail( "blah#jamesperrett.co.uk", "Message via JamesPerrett.com",
$message, "From: $email" )):
echo "<div id='contact_thanks' style='padding:10px; background:#fff;height:200px;'>";
echo "<span class='colorBox'>Thanks!</span>";
echo "<p>Thanks for your message, I'll get back to you as soon as I can!</p>";
echo "</div>";
endif;
?>
I'm not sure whether the colorbox that we are talking about are the same, I used this:
http://www.jacklmoore.com/colorbox/
As I can see, it support ajax directly($('.ajax').colorbox()), so I don't understand why you write the code yourself, but it doesn't matter.
However, seems you want the html respond with ajax shown in the color box, and after user close the colorbox, it show hidden content originally in the document. And the following code do that:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script language='javascript'>
function SendMailForm() {
var dataString=$('#form1').serialize();
$.ajax({
type: 'POST',
url: 'sendmail.php',
data: dataString,
cache: false,
success:
function (html) {
$('#HiddenBox').show();
var node=document.createElement('div');
node.innerHTML=html;
document.body.appendChild(node);
id_1.click();
document.body.removeChild(node);
}
});
}
$(document).ready(
function () {
$('.inline').colorbox({ inline: true, width: '50%' });
}
);
</script>
</head>
<body>
<form id='form1' class='formular' method='post' action='javascript:SendMailForm();'>
<fieldset>
<input data-validation-placeholder='Name' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Name' data-prompt-position='topRight:-79,15' />
<br /><br />
<input data-validation-placeholder='Email' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Email' data-prompt-position='topRight:-79,15' />
<br /><br />
<textarea value="What's on your mind?" data-validation-placeholder='Message' class='validate[required] text-input message' type='text' name='message' id='reqplaceholder' class='message' placeholder="What's on your mind?" data-prompt-position='topRight:-79,15' ></textarea>
<br /><br />
<input class='button' type='submit'>
</fieldset>
</form>
<a id='id_1' class='inline' href="#contact_thanks" style='display: none'></a>
<div id='HiddenBox' style='display:none'>
<span class='colorBox'>Thanks for your message</span>
<p>I'll get back to your query as soon as I can!</p>
</div>
</body>
</html>
Note the a tag of id_1 links to the same document contact_thanks which is responded by sendmail.php, I added a node for the responding html and remove after the colorbox is shown.
Related
I am trying to learn jQuery ajax the function seems to be working properly so says browser web developer tools but the values aren't pulled through to the php file(url) that I have here's my simple code.
This is the HTML anf jQuery File
<!Doctype HTML>
<html>
<head>
<title>Working with PHP and jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<form id="#myForm">
<p>
<label>Enter your name</label>
<input type="text" name="Name">
</p>
<p>
<label>Are you male
<input type="checkbox" name="IsMale">
</label>
</p>
<p>
<label>Enter your email address</label>
<input type="email" name="Email">
</p>
<p>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</p>
</form>
<div id="loadResult"></div>
<script>
$(function() {
$('#submitButton').on('click', function(e){
e.preventDefault();
$.ajax({
url: 'php/form1.php',
type: 'POST',
data: $('#myForm').serialize(),
success: function(result) {
console.log(result); $('#loadResult').html(result);
},
error: function(badresult){ alert("ajax error function hit"); console.log(badresult); }
});
});
});
</script>
</body>
</html>
And here's the php file
<?php
$name = $_POST['Name'];
$isMale = $_POST['IsMale'];
$email = $_POST['Email'];
echo "Name is $name, are you a male? $isMale. Your email address is $email";
?>
I am using the jquery serialize function but don't know where I am going wrong
Most likely what you're getting is this line blowing up
$isMale = $_POST['IsMale'];
And in your HTML we see
<input type="checkbox" name="IsMale">
Checkboxes, when they are not checked, are not successful, meaning they won't show up in $_POST. From the jQuery serialize manual
Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. snip
Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked
So you need to check that it was submitted
$isMale = (isset($_POST['IsMale'])) ? 'Yes' : 'No';
I'm working on a search engine and I have a really serious problem with GET and POST methods.
Im using an <input type="button" /> to avoid page from refreshing every time im pressing the button.
After button is pressed I'm showing a result (google_map, monumet picture, specs).
The problem now is that I want to submit and show form values + result (google_map, monumet picture, specs) by pressing this button.
This is a problem because <input type="button" /> does not submit form values and I'm really stuck.
Sure, here is a working example for you:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Working Example</title>
</head>
<body>
<form id="search-form">
<input type="text" name="text1" id="text1" value=""><br>
<input type="text" name="text2" id="text2" value=""><br>
<input type="text" name="text3" id="text3" value=""><br>
<input type="button" id="search-button" name="search-button" value="search">
</form>
<div id="response"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: "GET",
url: 'response.php',
data: $('#search-form').serialize(),
success: function(response) {
$('#response').html(response);
}
} );
});
});
</script>
</body>
</html>
response.php
<?php
echo "text1: " . $_GET['text1'] . "<br>";
echo "text2: " . $_GET['text2'] . "<br>";
echo "text3: " . $_GET['text3'] . "<br>";
echo "your response ...";
In the response you return whatever your response is, plus the form fields.
onClick="document.getElementById('FormName').submit();"
I've a problem:
I make ajax query to the database and display information about a specific ID and displays it in HTML-formatted message return.
Here's the HTML code:
<!-- WINE -->
<div id="slides">
<div id="information_slide" class="slide">
<!-- container as a result of JS -->
</div>
</div>
<!-- WINE -->
<!-- LOADING -->
<div id="loading_slide" class="slide" style="display: none;">
Loading information about the wine ...<br/><br/><img src="images/ajax-loader.gif" />
</div>
<!-- LOADING -->
<!-- AJAX CALL BUTTON -->
<?php
echo '<div id="'.$id['id'].'" class="menuItem">Show wine when ID = '.$id['id'].'</div>';
?>
<!-- AJAX CALL BUTTON -->
Here's the JS code:
[JavaScript]
$('.menuItem').on('click', function() {
// ID Wine
var id = $(this).attr('id');
$.ajax({
url: 'function.php',
beforeSend: function () {
$('#slides #information_slide').fadeOut(200, function() {
$('#slides #loading_slide').fadeIn(200);
});
},
data: {
funkcja: 'show_wine',
id: id
},
type: 'post',
success: function(result) {
setTimeout(function() {
$('#slides #loading_slide').fadeOut(200, function() {
$('#slides #information_slide').html(result).fadeIn(400);
});
}, 500);
}
});
// alert(id);
});
[/JavaScript]
Here's the PHP code:
[php]
<?php
if(isset($_POST['funkcja']) && !empty($_POST['funkcja'])) {
switch($_POST['funkcja']) {
case 'show_wine':
show_wine($_POST['id']);
break;
}
}
// Callback wine function
function show_wine($id) {
$qwerty = "SELECT * FROM `wina` WHERE id='".$id."' LIMIT 1";
$sql = mysql_query($qwerty);
while($id = mysql_fetch_assoc($sql)) {
echo '
<div id="'.$id['id'].'" class="element">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="'.$_SESSION['jcartToken'].'" />
<input type="hidden" name="my-item-id" value="'.$id['id'].'" />
<input type="hidden" name="my-item-name" value="'.stripslashes($id['nazwa']).'" />
<input type="hidden" name="my-item-price" value="'.stripslashes($cena_przecinek).'" />
<input type="hidden" name="my-item-url" value="" />
<input type="hidden" name="my-item-qty" value="1" size="3" class="item-sztuk" />
<input type="submit" name="my-add-button" value="to cart" class="item-button" />
</fieldset>
</form>
<!-- ... remaining HTML code... -->
</div>
';
}
}
?>
[/php]
I have a result as previously described.
The script shows me the information (records) a specific ID from the database - this part of the script is OK.
The problem I have at the moment when the PHP callback function (which is called Ajax) hosts a form uses also Ajax functions.
This part of HTML code in response from PHP function...
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="'.$_SESSION['jcartToken'].'" />
<input type="hidden" name="my-item-id" value="'.$id['id'].'" />
<input type="hidden" name="my-item-name" value="'.stripslashes($id['nazwa']).'" />
<input type="hidden" name="my-item-price" value="'.stripslashes($cena_przecinek).'" />
<input type="hidden" name="my-item-url" value="" />
<input type="hidden" name="my-item-qty" value="1" size="3" class="item-sztuk" />
<input type="submit" name="my-add-button" value="to cart" class="item-button" />
</fieldset>
</form>
... is form of my jCart script. Button (name=my-add-button) not work.
JS script is loaded from the very beginning on page:
[html]
<head>
<script type="text/javascript" language="javascript" src="files/jcart.js"></script>
</head>
[/html]
When i call a ajax function, load a result (html code) to the container and button with should add item to cart, page is reloading and item only is added to cart.
I've tried to add return false; in a PHP script, but if there happens to be absolutely nothing.
Here is the JS code file jcart -> www.starwines.com.pl/jcart/js/jcart.js
AND here is DEMO PAGE -> www.starwines.com.pl/test.php
Please try the following:
*1)* add an item by clicking the "Dodaj do koszyka" (yellow button)
2) select a different wine from the carousel, and then click "Dodaj do koszyka"
How to solve this problem?
Regards !
PS. Sorry for English language, I'm weak :)
Change your click event binding code from
$('.jcart').submit(function(e) {
add($(this));
e.preventDefault();
});
to
$(document).on('submit', '.jcart', function(e) {
add($(this));
e.preventDefault();
});
will do the work.
jQuery on
My current working situation looks something like this:
<!-- collect user info -->
<form method="GET">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<!-- display image based on user info -->
<img src="color.php?param1=<?php echo $_GET['param1']; ?>param2=<?php echo $_GET['param2']; ?>" alt="" />
This is working perfectly. Now I would like only the image being updated by ajax, while the rest of the HTML remains unchanged. I tried this:
<form method="GET" id="formId">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<div id="result"></div>
<script type="text/javascript">
var frm = $('#formId');
frm.submit(function(){
$.ajax({
type: 'GET',
success: function () {
$('#result').html('<img src="color.php?' + frm.serialize() + '" />');
}
});
return false;
});
</script>
In fact this solution works more or less. However, I have some issues here:
Is this good jquery / ajax code or is it silly (yes, I am new to jquery)?
The field "result" does update only if one of the fields changes. Can I make it update whenever the submit button is being klicked?
I would like to display a spinning load.gif while the color.php calculates the picture. I tried it this way, without success:
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$('#result').html(ajax_load).html('<img src="color.php?' + frm.serialize() + '" />');
Thank you!
To the jQuery ajax call add the parameter cache : false, to force to refresh the image. To use the loader, just play with the attributo src. Copy / paste the code:
<form method="GET" id="formId">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<div id="result">
<img id="preview" src="img/load.gif" />
</div>
<script type="text/javascript">
var frm = $('#formId');
frm.submit(function(){
$('#preview').attr('src', 'img/load.gif' );
$('#preview').attr('src', 'color.php?' + frm.serialize() + '&_' + new Date().getTime() );
return false;
});
</script>
i am using the following code to auto-submit a form
<script type="text/javascript">
$(function () {
$('#submit').click();
});
</script>
<div style="display:none">
<form method="post" action="http://mydomain/texting/register.php?list_id=15">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form>
</div>
i want to submit the same data to two urls ...
http://mydomain/texting/register.php?list_id=15
http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>
how can edit my code to submit same form data automatically?
i tried this code
<script type="text/javascript">
function submitTwice(f){
f.action = 'http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>';
f.target='ifr1';
f.submit();
f.action = 'http://mydomain.com/texting/register.php?list_id=15';
f.target='ifr2';
f.submit();
}
</script>
*/
<script type="text/javascript">
$(function () {
$('submitTwice(f)').click();
});
</script>
<div style="display:none">
<iframe name="ifr1" width="20" height="20">
<form method="post" action="http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form></iframe>
</div>
<div style="display:none"><iframe name="ifr2" width="20" height="20">
<form method="post" action="http://mydomain.com/texting/register.php?list_id=15">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form></iframe>
</div>
but it is not working, any suggestion to make it happen, the same data is to be sent to both the urls automatically using javascript
You can use jQuerys ajax and send the data with post, to both the urls.
first save all data you want to send in an valid data array. if you want it automated, you can do something like this:
var sendData = {};
$("#formId").find("input").each(function(i, item){
sendData[item.name] = item.value;
});
or as a simple string:
var sendData = "name=value&email=value";
then send the form data to both urls with ajax, as post type:
$.ajax({ url: "http://url1/", type: "POST", data: sendData,
success: function(response){
alert(response);
}
});
$.ajax({ url: "http://url2/", type: "POST", data: sendData,
success: function(response){
alert(response);
}
});
Note: make sure to return false to the button or sending form, you can do that something like:
$("formId").submit(function(){
// do ajax send data
return false;
}
EDIT: added unchecked code for this, with comments
$(document).ready(function(){
// grab the form and bind the submit event
$("#formId").submit(function(){
// collect all the data you want to post
var sendData = {};
this.find("input").each(function(i, item){
sendData[item.name] = item.value;
});
// send the request to both urls with ajax
$.ajax({ url: "url1", type: "POST", data: sendData,
success: function(response){
// handle response from url1
alert(response);
}
});
$.ajax({ url: "url2", type: "POST", data: sendData,
success: function(response){
// handle response from url2
alert(response);
}
});
// return false, to disable default submit event
return false;
});
});
just send name and email to the server script in a regular form,
then do two requests from within your register.php with something like HttpRequest or the like...
some freehand code:
client:
<form id="autoSubmitForm" method="post" action="/register.php?list_id=15">
<input type="hidden" name="name" value="<?php data['name2']; ?>" />
<input type="hidden" name="email" value="<?php data['email2']; ?>" />
<input type="submit" name="submit" value="Sign Up" style="visibility:hidden;" />
</form>
<script>
$(document).ready(function(){
$('#autoSubmitForm').submit();
});
</script>
server:
<?php
$name = $_POST["name2"];
$email = $_POST["email2"];
$url1 = 'http://lala'; //or relative to server root: '/lala'
$url2 = 'http://other';
sendRequest($url1, $name, $email);
sendRequest($url2, $name, $email);
?>
The implementation of sendRequest is worth another question (or reading the documentation of HttpRequest mentioned above)
Good luck, I see your duplicate question got closed...