Verzögerte Formularübermittlung unter Verwendung von JQuery

Question

Ich versuche, meine Formularübermittlung zu verzögern, so dass beim Eingeben gültiger Informationen eine Warnung angezeigt wird, um dem Benutzer mitzuteilen, dass seine Informationen aufgezeichnet wurden. Die Seite sollte dann X Sekunden warten, bevor Sie das Formular abschicken.

Ich habe es geschafft, den Alarm Pop-up mit einem meiner anderen Formulare zu arbeiten, aber aus irgendeinem Grund funktioniert es nicht mit diesem.

Ich werde meinen JQuery-Code unten, irgendwelche Ideen?

Dank

Dies ist der Code für das Formular, das funktioniert:

$('#addprebooked_form').submit(function(e) { 
 

 
\t \t if ($('#addprebooked_email').val() != $('#addprebooked_confirmemail').val()) 
 
\t \t { 
 
\t \t \t $("<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); 
 
\t \t \t e.preventDefault(); 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $("<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); 
 
\t \t \t var delay = 3000; 
 
\t \t \t setTimeout(function() { $(this).submit(); }, delay); 
 
\t \t } 
 

 
\t });

Dies ist der Code Ich habe Probleme mit:

$('#addevent_form').submit(function(e) { 
 

 
\t \t if ($('#addevent_form').validate().checkForm() === false) 
 
\t \t { 
 
\t \t \t e.preventDefault(); 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $("<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); 
 
\t \t \t var delay = 3000; 
 
\t \t \t setTimeout(function() { $(this).submit(); }, delay); 
 
\t \t } 
 

 
\t });

Answer 1

Ich glaube nicht, dass das funktioniert, weil this innerhalb der setTimeout() Handler nicht auf das form Element bezieht.

Auch der Aufruf der submit() Methode von jQuery wird in eine rekursive Schleife eintreten, da dies wiederum den submit Event Handler aufrufen wird.

In Ihrem Fall müssen Sie das Formular in dem Handler oder so, dann in den fadeOut() kompletten Handler verhindern, können Sie das form des Elements submit() Methode aufrufe müssen.

$('#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

Hinweis: Ich bin nicht sicher, wie das erste Beispiel