HTML form submit POSTS input button/submit values; JavaScript form submit does not

Question

So this has been bugging me for some time. I discovered a page that was intermittently submitting form contents twice. For simplification, the inputs are a text field and a button. Upon further inspection, I noticed one form submission included the text and button inputs and the other submission only sent the text input.

I set up a test page to troubleshoot. I put it up on jsfiddle, but I don't think it'll be much help, since I cannot see the values passed using an HTTP Proxy tool such as Fiddler.

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: Submits text and button

Form 2: Submits text

Form 3: Submits text

Form 4: Submits twice. 1) Submits text 2) Submits text and button

From the looks of it, submitting using HTML Form submit sends over text and button inputs. But submitting the form using JavaScript sends over just the text input. No button.

What is the explanation for this behavior? Why does a JavaScript form submit send over text input only, yet HTML form submit sends over both text and button inputs?

Is this by design? If so, what would be the reason(s)? Seems inconsistent to have your HTML parser send the button value, yet your JS engine does not.

Thank you for any help.

You could make a form with nothing but 20 submit buttons and the one that is triggered will be the only one transmitted. In your 4th example, you are logically saying, "when this form is submitted, submit it again." — Billbad

Wolfgang Wolfgang · Accepted Answer · 2016-07-29T20:00:22

Form 1: Submits text and button .. default behavior, using a input type submit Both input controls get submitted because you've clicked the submit button. Add another submit-button. You will see that only the button dispatching the submit is included in the post data.

So.. what's the reason for that: This way you can add two buttongs, e.g. "cancel" and "save" to a form using the same name

Form 2: Submits text Form 3: Submits text .. both solutions look exactly the same to me, the input type button is not handled as an "submit input field" here.. you submit using js. There is no action on the button and that's why it's not included. (Like described above).

Form 4: Submits twice. 1) Submits text 2) Submits text and button You're using a input type submit like in the Form 1.. so this form gets submitted exactly the same way. But: there is also a onsubmit handler on the form that calls the submit again using js- that's the reason for the second submit. The handler is called first, because a submit will trigger a page-reload and the script executing the event will not be "present" anymove after the submit.

The other behaviour is just like described for Fomr 2 & 3 .

Just let me know if you need some further explainations.

HTML form submit POSTS input button/submit values; JavaScript form submit does not

1 Answers