Wie mache ich etwas vor dem Einreichen? [geschlossen]

141

Ich habe ein Formular, das eine Schaltfläche hat, die das Formular sendet. Ich muss etwas tun, bevor Einreichungen stattfinden. Ich habe versucht, onClick auf diese Schaltfläche zu klicken , aber es passiert nach dem Senden .

Ich kann den Code nicht freigeben, aber was sollte ich im Allgemeinen in jQuery oder JS tun, um damit umzugehen?

Jimmy
quelle
11
Husten jsFiddle Beispiel Husten
Brad Christie
2
@Brad Christie, wenn ich nur einen Kommentar als Antwort akzeptieren könnte. Danke sehr hilfreich.
Jimmy
3
Ich hasse es, wenn Stackover eine Frage schließt. Sie können Ihre Aktionen mit den folgenden Ereignissen ausführen, die zum folgenden Zeitpunkt unmittelbar vor dem Absenden eines Formulars ausgelöst werden: 1 - OnMouseover 2 - Onmousemove 3 - Onmousedown 4 - Onfocus 5 - OnMouseup 6 - Onclick 7
Shadi Namrouti
1
Ich schätze diese Frage, weil ich erst kürzlich auf dasselbe Problem gestoßen bin und diese Frage genau das ist, was ich stellen wollte.
Wastetime909
2
lustig, dass diese Frage geschlossen wurde, weil es keine echte Frage ist: -?
AnnaKlein

Antworten:

207

Wenn Sie ein Formular als solches haben:

<form id="myform">
...
</form>

Sie können den folgenden jQuery-Code verwenden, um etwas zu tun, bevor das Formular gesendet wird:

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});
Dan Breen
quelle
2
Ich habe Probleme, dies für Schleifen zu verwenden, die vor dem Senden abgeschlossen werden müssen. Irgendwelche Vorschläge?
Smilyan
Hast du einen Code zum Anschauen? Ich bin mir nicht sicher, ob ich das Problem verstehe.
Dan Breen
3
Warum ist dies in einen leeren Funktionsaufruf eingeschlossen? Sollte die submitFunktion nicht in der Lage sein, direkt an die Funktion $('#form')ohne die umgebende leere Funktion zu binden ? BEARBEITEN: Die Dokumente schlagen vor, dass der umgebende Funktionsaufruf nicht benötigt wird .
Eykanal
@eykanal Guter Punkt. Ich habe die Antwort bearbeitet, um den Funktionsumbruch zu entfernen, nachdem ich bestätigt habe, dass er ordnungsgemäß funktioniert, wenn er entfernt wurde.
Jon Schneider
3
@eykanal Ich habe den Funktionsaufruf "leer" verwendet, da dies eine Abkürzung für die $(document).ready()Funktion von jQuery ist , die sicherstellt, dass das DOM vollständig ist, bevor das submitEreignis angehängt wird . Wenn sich Ihr JS am Ende der Seite befindet, ist dies nicht erforderlich. Wenn es sich jedoch im <head>Abschnitt befindet, benötigen Sie es. Siehe: stackoverflow.com/q/13062246/135108
Dan Breen
23

Angenommen, Sie haben ein Formular wie das folgende:

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

Sie können ein onsubmitEreignis mit jQuery wie folgt anhängen :

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

Wenn Sie return falsedas Formular nicht nach der Funktion senden, wenn Sie true oder nichts zurückgeben, wird es wie gewohnt gesendet.

Weitere Informationen finden Sie in der jQuery-Dokumentation .

Gipfel
quelle
11

Sie können onclickJavaScript- oder jQuery-Code ausführen, bevor Sie das Formular wie folgt senden:

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />
James Johnson
quelle
18
Dies funktioniert jedoch nicht, wenn das Formular z. B. ein Eingabefeld enthält und der Benutzer die Eingabetaste drückt, die das Übermittlungsereignis auslöst. In der Regel ist es besser, direkt an das Übermittlungsereignis anzuhängen, damit Sie sicherstellen können, dass es aufgerufen wird, unabhängig davon, wie der Benutzer die Übermittlung ausgelöst hat.
Acme
2
<input type = "submit" value = "Klicken Sie auf" onmouseover = "beforeSubmit ();" />
Ansyori
5

Stellen Sie sicher, dass die Schaltfläche "Senden" nicht vom Typ "Senden" ist. Machen Sie sie zu einer Schaltfläche. Verwenden Sie dann das Ereignis onclick, um Javascript auszulösen. Dort können Sie tun, was Sie wollen, bevor Sie Ihre Daten tatsächlich veröffentlichen.

rogerlsmith
quelle
3
Das Formular kann auf verschiedene Arten gesendet werden, z. B. durch Drücken der Eingabetaste in bestimmten Feldern. Es ist keine gute Idee, an einen Klick auf eine Schaltfläche zu binden, auf die möglicherweise nicht geklickt wird. Die anderen Antworten zeigen, wie Sie onsubmitdas Formular binden. Dies wird ausgelöst, unabhängig davon, wie das Formular gesendet wird.
Jason