使用JQuery延迟提交表单

Question

I am trying to delay my form submission so that when valid information is entered an alert pops up to tell the user that their information has been recorded. The page should then wait for X seconds before submitting the form.

I have managed to get the alert pop-up working with one of my other forms but for some reason it is not working with this one.

I'll include my JQuery code below, any ideas?

Thanks

THIS IS THE CODE FOR THE FORM THAT WORKS:

 $('#addprebooked_form').submit(function(e) { if ($('#addprebooked_email').val() != $('#addprebooked_confirmemail').val()) { $("<div class='alert alert-warning' style='position: fixed; bottom: 0;'>The emails you have enter do not appear to match! Please check you have entered the visitors details correctly and try again.</div>").appendTo('#prebook').fadeOut(3000); e.preventDefault(); return false; } else { $("<div class='alert alert-success' style='position: fixed; bottom: 0;'>Success! This visitor has been booked in for the time and date specified.</div>").appendTo('#prebook').fadeOut(3000); var delay = 3000; setTimeout(function () { $(this).submit(); }, delay); } }); 

THIS IS THE CODE I AM HAVING PROBLEMS WITH:

 $('#addevent_form').submit(function(e) { if ($('#addevent_form').validate().checkForm() === false) { e.preventDefault(); return false; } else { $("<div class='alert alert-success' style='position: fixed; bottom: 0;'><p>Success! This event has been scheduled for the time and date specified.</p></div>").appendTo('#createevent').fadeOut(3000); var delay = 3000; setTimeout(function () { $(this).submit(); }, delay); } }); 

Answer 1

I don't think that will work, because this inside the setTimeout() handler will not refer to the form element.

Also calling the jQuery's submit() method will enter a recursive loop because that will again call the submit event handler.

In your case, you need to prevent the form submit in the handler either way, then in the fadeOut() complete handler, you need to call the form element's submit() method.

$('#addevent_form').submit(function(e) {
  e.preventDefault();
  if ($('#addevent_form').validate().checkForm()) {
    var form = this;
    $("<div class='alert alert-success' style='position: fixed; bottom: 0;'><p>Success! This event has been scheduled for the time and date specified.</p></div>").appendTo('#createevent').fadeOut(3000, function() {
      form.submit();
    });
  }
});

Demo: Fiddle

Note: I'm not sure how the first example is working