HTML Form array disappearing after page refresh
Question
I have the follow html:
<html>
<body>
<div id='refresh'>
<form id='form1' action='do.php' method='post'>
<input type='checkbox' name='thetickets[]' value='1'>
<input type='hidden' name='gender'>
<input type='submit' value='Go'>
</form>
</div>
</body>
</html>
And the following JS:
<script type="text/javascript">
$(document).ready(function() {// REFRESH DIV EVERY 5 SECONDS
interval = setTimeout(refreshpage, 5000);
function refreshpage() {
$('#refresh').load('page.php?&timer='+new Date().getTime()+' #refresh');
interval = setTimeout(refreshpage, 5000);
}
});
</script>
<script type="text/javascript"> /SUBMIT FORM
$(document).ready(function() {
var options = {
target: '',
dataType: 'html',
beforeSubmit: showRequest_reassign,
success: showResponse_reassign
};
$("#refresh").delegate("#form1,"submit",function () {
clearTimeout(interval);
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest_reassign(formData, jqForm, options){
return true;
}
function showResponse_reassign(responseText, statusText, xhr, $form){
alert(responseText)
}
</script>
If I submit the form before 5 seconds, the form submits correctly, but if I wait 5 seconds, the page refreshes, I submit the form, but the input type "thetickets[]" does not submit. I check Developer tools, Form Data, and the value "thetickets[]" doesn't even exist.... I'm lost as to why..
Thanks,
3 answers
solution1
1 2014-09-17 17:55:03
Thought I'd post your code with my edits here, it might help you find your issue:
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {// REFRESH DIV EVERY 5 SECONDS
interval = setTimeout(refreshpage, 5000);
function refreshpage() {
var thisurl = document.URL;
$('#refresh').load(thisurl + '?timer='+new Date().getTime()+' #refresh');
interval = setTimeout(refreshpage, 5000);
console.log("reloaded");
}
});
</script>
<script type="text/javascript"> //SUBMIT FORM
$(document).ready(function() {
var options = {
target: '',
dataType: 'html',
beforeSubmit: showRequest_reassign,
success: showResponse_reassign
};
$("#refresh").delegate("#form1","submit",function () {
clearTimeout(interval);
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest_reassign(formData, jqForm, options){
return true;
}
function showResponse_reassign(responseText, statusText, xhr, $form){
alert(responseText)
}
</script>
<div id='refresh'>
<form id='form1' action='http://atlantis.cit.ie/displayvalues.php' method='post'>
<input type='checkbox' name='thetickets[]' value='1'>
<input type='hidden' name='gender'>
<input type='submit' value='Go'>
</form>
</div>
</body>
</html>
If you can provide me with more information on the error you are getting I'd be more than glad to help!
solution2
0 2014-09-16 23:22:56
the only thing i found with this code (aside from typos mentioned above) is that your "thisurl" var must be a php page and it must already have other vars in the query string.
NOTE: you will only get your $thetickets array if you have actually checked that box.
solution3
0 2014-09-18 22:04:30
Found the problem, my original code had incorrect structure.
<div>
<form>
</div>
</form>
removed the div, and now the form works correctly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.