2016-11-09 2 views
0

Wenn ein button mit diesem Werk (Loader wird angezeigt, bis Seite geladen ist):Ausführen Skript von von einreichen

<script> 
    $(document).ready(function(){ 
     $(".loader").hide(); 
     $(".overlay").fadeOut(1000); 

     $('button').click(function() { 
      $(".loader").fadeIn("fast"); 
      $(".overlay").fadeIn(100); 
     }); 
    }); 
</script> 

Aber wenn ich Submit verwenden Sie es nicht:

Ich versuche, auf folgendes Arbeit:

<script> 
    $(document).ready(function(){ 
     $(".loader").hide(); 
     $(".overlay").fadeOut(1000); 

     $("form").submit(function() { 
      $(".loader").fadeIn("fast"); 
      $(".overlay").fadeIn(100); 
     }); 
    }); 
</script> 

ich habe auch ohne Freude versucht:

$(input[type="submit"]).click(function() { 

Ich möchte es für alle Submits auf der Seite arbeiten und so IDs nicht verwenden möchten. Alle Hinweise sind sehr willkommen.

UPDATE

$("form").submit(function(e) { 

hat den Trick.

+0

Würden Sie das Formular nicht erneut senden, um die Seite zu aktualisieren, sodass die Fade-Effekte nicht relevant sind? Definieren Sie "funktioniert nicht" in diesem Fall. – David

+0

Das Submit lädt die Seite tatsächlich neu, was effektiv ist, es zu aktualisieren, Sie haben Recht. Was ich will ist, dass der Loader angezeigt wird, wenn der Submit gedrückt wird und dann, wenn die Seite den Loader neu geladen hat. Wie gesagt, es funktioniert einwandfrei, wenn ich ein Update benutze, aber nicht mit RGriffiths

+0

Aber wenn die Seite fast sofort neu geladen wird, macht der Lader dann nicht seine Arbeit? Es scheint, als ob das gut funktioniert. Der einzige Grund, warum Sie keinen Loader sehen, ist, dass der eigentliche Vorgang schneller abläuft als der Loader. Ist das wirklich eine schlechte Sache? Fragen Sie, wie Sie eine Verzögerung künstlich einführen, bevor Sie die Seite neu laden? – David

Antwort

3

Sie müssen das Standardverhalten Ihres Formulars verhindern, andernfalls wird es gesendet (und der Browser wechselt zur nächsten Seite [die Aktion in Ihrem Formular]).

Um die submit Aktion, die Sie benötigen zu deaktivieren event.preventDefault() innerhalb der submit/click Funktion zu verwenden.

Wenn Sie das Formular einreichen müssen - Sie eine Variable hinzufügen können, wenn die submittion überprüfen wurde bereits verhindert, und dass nach zu verhindern (oder das Formular in der submit Funktion einreichen):

var submitPrevented = false; 
$("form").submit(function(e) { 
    if (!submitPrevented) { 
     submitPrevented = true; 
     e.preventDefault() 
    } 
    $(".loader").fadeIn("fast"); 
    $(".overlay").fadeIn(100); 
    var that = this; 
    setTimeout(function() { 
     that.submit(); 
    }, 1000); 
}); 

Beachten Sie, dass ich das Element e als Parameter der Funktion hinzugefügt habe.

In Bezug auf den letzten Code, den Sie geschrieben haben - dort ist ein Syntaxfehler. Dies ist die korrekte Syntax:

$('input[type="submit"]').click(function() { 
+0

Vielen Dank, aber dies verhindert die Veröffentlichung des Formulars. Wie ich sage, es funktioniert gut, wenn ich

+0

@RGriffiths verwenden, überprüfen Sie das Update – Dekel

+0

Danke. Mehr als eigentlich nötig, da ich immer das Seitenformular posten möchte. Einfach Funktion (e) anstatt Funktion() zu setzen, macht den Trick. Ich schätze den Zeiger. – RGriffiths