I am quite ok with PHP, but a total noob with jQuery, and got stuck with autosaving form data.
The autosave function gets called every 30 seconds in dummy.php. I'm sending the serialized form data for processing (--> database) to savetest.php.
At this moment, I am stuck with this question:
How do I get savetest.php to 'listen' to incoming data and react to it?
At this moment, I get the alert 'Oh no!' ( = no success) every 30 seconds.
Here's my shortened sample code:
dummy.php, snippet 1 (HTML & PHP):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../../_include/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>My Form</h1>
<form name="form1" id="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<input type="radio" name="item_2_1" id="c_2_1_0" value="0" />
<input type="radio" name="item_2_1" id="c_2_1_1" value="1" />
<input type="radio" name="item_2_1" id="c_2_1_2" value="2" />
<input type="radio" name="item_2_1" id="c_2_1_3" value="3" />
<input type="checkbox" name="item_3_1[]" id="c_3_1_0" value="yes" />
<input type="checkbox" name="item_3_1[]" id="c_3_1_1" value="no" />
<input type="text" name="item_4_1" id="c_4_1_0" />
</form>
dummy.php, snippet 2 (jQuery):
<script type="text/javascript">
function autosave() {
jQuery('form').each(function() {
jQuery.ajax({
url: 'savetest.php',
data: {
'autosave' : true,
'formData' : jQuery(this).serialize()},
type: 'POST',
success: function(data){
if(data && data == 'success') {
alert("OK!");
}else{
alert("Oh no!");
}
}// end successful POST function
}); // end jQuery ajax call
}); // end setting up the autosave on every form on the page
}// end function autosave()
jQuery(function($) {
setInterval(autosave, 30 * 1000);
});
</script>
and this is savetest.php:
if (isset($_POST)) {
var_dump($_POST);
exit();
} else {
echo 'Hi, no $_POST.';
}
unfortunately, still the unsuccessful alert... and savetest.php dumping array(0){} :-(
1 Answer 1
if(isset($_POST)):
//processing to save autosave
else:
//the rest of your form code and jQuery stuff
endif;
This will check if the data is posted, the //rest of your data should represent All other code generated by the page that does not do any processing.
Also, may I suggest cleaning up that data attribute?
data: {
'navigation': 'save',
'autosave' : true,
'formData' : jQuery(this).serialize()
}
Then on the server side you can access it just like normal, $_POST['navigation'] and $_POST['formData'] contains the array of name=value combinations.
Moreover, your function should be within $(document).ready, or like the following:
jQuery(function($){
//the rest of your code
});
jQuery(function($) will run as $(document).ready and will alias the $ symbol as jQuery while within that function.
This should cover all bases.
4 Comments
Oh no alert... any idea why?data parameter? it still looks the same, also, you might as well just do if(isset($_POST)) for the time being, and then dump it back, like this -> echo '<pre>', print_r($_POST, TRUE),'</pre>';
var_dump()?