CODEWITHSUNDEEP
phpjqueryarraysajaxforms
DobotJr
DobotJr

Reputation: 4049

HTML Form array disappearing after page refresh

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,

Upvotes: 1

Views: 1100

Answers (3)

DobotJr
DobotJr

Reputation: 4049

Found the problem, my original code had incorrect structure.

<div>

<form>

</div>

</form>

removed the div, and now the form works correctly.

Upvotes: 0

patrickdamery
patrickdamery

Reputation: 539

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!

Upvotes: 1

rkstar
rkstar

Reputation: 1220

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.

Upvotes: 0

Related Questions