jquery ajax post form function not submitting on timeout -
i have function posts forms:
function post_form(form_id, type, redir_url) { $( form_id ).submit(function(e) { checkrequired(e); var postdata = $(this).serializearray(); var formurl = $(this).attr("action"); loadmodalbody('<h2 align="center">loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'loading'); $.ajax({ url : '/section' + formurl, type: "post", data : postdata, success:function(data, textstatus, jqxhr) { //alert(type); if(type === 'modal') { if(redir_url === '') { loadmodal('/section' + formurl, ''); } else { loadmodal('/section' + redir_url, ''); } } else if(type === 'reload') { if(redir_url === '') { location.reload(); } else { // } } else { //close loading modal closemodal(); //location.reload(); //$("body").html(data); } }, error: function(jqxhr, textstatus, errorthrown) { //if fails } }); e.preventdefault(); }); } which works fine calling this:
<form method="post" action="/users/mileage" id="form1" onsubmit="post_form('#form1', 'modal');"> <input="submit" /> </form> i trying use code:
<form id="invoices" action="/accounting/dashboard" method="post"> </form> <script type="text/javascript"> $(document).ready(function() { var timeoutid; $('#invoices input, #invoices textarea').on('input propertychange change', function() { cleartimeout(timeoutid); timeoutid = settimeout(function() { // runs 1 second (1000 ms) after last change //savetodb(); post_form('#invoices', '', ''); }, 1000); }); }); </script> but not posting , there no errors showing in console
all other forms using onsubmit in form tag work fine cannot post on timeout using above jquery code
remove submit handler $( form_id ).submit(function(e) unnecessary in both of usage cases.
in first case trigger off inline onsubmit="postform(...)".
it doesn't work in second case because don't trigger submit event.
edit clearer example
if want move ajax call triggers off input change...
let's remove onsubmit form element.
<form id="invoices" action="/accounting/dashboard" method="post"> <input type="text" /> <button type="submit">submit</button> </form> set submit handler browser won't normal form submission cause page navigate away.
$("#invoices").on("submit", function(e) { e.preventdefault(); postform("#invoices"); }); handle property change event
var timeoutid; $("#invoices input").on("input propertychange change", function() { cleartimeout(timeoutid); timeoutid = settimeout(function() { postform("#invoices"); }, 1000); }); do ajax post
function postform(formid) { var form = $(formid); $.ajax({ url: form.attr("action"), type: form.attr("method"), data: form.serializearray(), success: function(data) { console.log(data); }, error: function(jqxhr, status, error) { } }); } and jsfiddle example.
what's different?
in second case you've wrapped ajax request in form submission event. never trigger because in change event. suggested remove submit handler because setting submit handler within inline onsubmit.
- you trigger change event
- you call
post_form()sets up submission handler - done. submit not triggered.
Comments
Post a Comment