2016-07-29 26 views
1

Also das nervt mich seit einiger Zeit. Ich habe eine Seite entdeckt, auf der Formularinhalte zweimal intermittierend gesendet wurden. Zur Vereinfachung sind die Eingaben ein Textfeld und eine Schaltfläche. Bei einer weiteren Überprüfung bemerkte ich, dass eine Formularübergabe die Text- und Schaltflächeneingaben enthielt und die andere Übermittlung nur die Texteingabe sendete.HTML-Formular senden POSTS-Eingabeschaltfläche/Werte senden; JavaScript Formular reicht nicht

Ich richte eine Testseite zur Fehlerbehebung ein. Ich habe es auf jsfiddle gestellt, aber ich denke nicht, dass es viel helfen wird, da ich die Werte, die mit einem HTTP-Proxy-Tool wie Fiddler übergeben werden, nicht sehen kann.

https://jsfiddle.net/9xL5w9t2/

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form1" name="form1name"> 
<input type="submit" value="submit form" id="submitbtn1" name="submitbtn1name" /> 
<input type="text" id="text1" value="123" name="text1name" /> 
</form> 

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form2" name="form2name"> 
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form2name.submit();" id="submitbtn2" name="submitbtn2name" /> 
<input type="text" id="text2" value="123" name="text2name" /> 
</form> 

<form method="post" action="www.google.com" id="form3" name="form3name"> 
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form3name.submit();" id="submitbtn3" name="submitbtn3name" /> 
<input type="text" id="text3" value="123" name="text3name" /> 
</form> 

<form method="post" action="www.google.com" onsubmit="alert('form submitted'); this.submit();" id="form4" name="form4name"> 
<input type="submit" value="submit form" id="submitbtn4" name="submitbtn4name" /> 
<input type="text" id="text4" value="123" name="text4name" /> 
</form> 

Form 1: Sendet Text und Taste

Form 2: Sendet Text

Form 3: Sendet Text

Form 4: zweimal einreicht. 1) Submits Text 2) Submits Text und Button

Aus den Looks sendet das Senden mit HTML-Formular senden über Text und Tasteneingaben. Das Senden des Formulars mithilfe von JavaScript sendet jedoch nur die Texteingabe. Keine Taste.

Was ist die Erklärung für dieses Verhalten? Warum sendet ein JavaScript-Formular nur Texteingaben, aber HTML-Formularübermittlungen werden über Text- und Schaltflächeneingaben gesendet?

Ist das von Entwurf? Wenn ja, was wären die Gründe? Es scheint inkonsistent zu sein, dass Ihr HTML-Parser den Button-Wert sendet, aber Ihre JS-Engine tut dies nicht.

Vielen Dank für jede Hilfe.

+0

Sie könnten ein Formular mit nur 20 Sendeschaltflächen erstellen, und derjenige, der ausgelöst wird, wird als einziger gesendet. In Ihrem vierten Beispiel sagen Sie logisch: "Wenn dieses Formular gesendet wird, senden Sie es erneut." – Billbad

Antwort

2

Formular 1: Übermittelt Text und Schaltfläche .. Standardverhalten unter Verwendung eines Eingabe-Typs Senden Beide Eingabesteuerelemente werden gesendet, weil Sie auf die Schaltfläche Senden geklickt haben. Fügen Sie eine weitere Senden-Schaltfläche hinzu. Sie werden sehen, dass nur die Schaltfläche, die das Senden abschickt, in den Postdaten enthalten ist.

Also ... was ist der Grund dafür: Auf diese Weise können Sie zwei Buttongs hinzufügen, z. „Abbrechen“ und „Speicher“ zu einem Formular mit dem gleichen Namen

Form 2: einreicht Text Form 3: einreicht Text .. beide Lösungen sehen genau gleich zu mir, die Eingangstyp-Taste nicht als behandelt "Eingabefeld senden" hier .. Sie reichen mit js ein. Es gibt keine Aktion auf der Schaltfläche und deshalb ist es nicht enthalten. (Wie oben beschrieben).

Formular 4: Übergibt zweimal. 1) Submits text 2) Submits text und button Sie verwenden eine Eingabeart senden wie im Formular 1 .. so wird dieses Formular genau auf die gleiche Weise eingereicht. Aber: Es gibt auch einen onsubmit-Handler auf dem Formular, der das Submit erneut mit js aufruft - das ist der Grund für das zweite Senden. Der Handler wird zuerst aufgerufen, da ein Submit ein erneutes Laden der Seite auslöst und das Skript, das das Ereignis ausführt, nach dem Senden nicht "vorhanden" ist. Das andere Verhalten ist wie für Fomr 2 beschrieben.

Lassen Sie es mich wissen, wenn Sie weitere Erläuterungen benötigen.

+0

Dies ist eine ausgezeichnete Erklärung. Am meisten geschätzt. Wenn ich dieses Recht habe, sendet die JS-Implementierung die Schaltfläche nicht, weil die Schaltfläche die Formularaktion nicht ausgelöst hat. Richtig? Werden alle Buttons nicht per JS-Formular gesendet oder nur die Schaltfläche mit dem onclick-Event? Vielen Dank. – user3621633

+0

Ich habe es gerade getestet. Bei HTML wird nur der Formular-Button gesendet, der das Ereignis ausgelöst hat. Für JS werden keine Schaltflächen gesendet. Danke nochmal für deine Hilfe! – user3621633

+1

Gern geschehen. Ein weiterer Hinweis: Wenn Sie Daten auf Basis eines Javascript submit() posten müssen, geben Sie einfach einen Eingabetyp = "hidden" in Ihr Formular ein und setzen Sie diesen Wert onSubmit, damit er in das Formular eingefügt wird. – Wolfgang