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
– Billbad, Commented Jul 31, 2016 at 19:00

Wolfgang · Accepted Answer · 2016-07-29 20:00:22Z

2

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.

answered Jul 29, 2016 at 20:00

Wolfgang

8965 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3621633 Over a year ago

This is an EXCELLENT explanation. Most appreciated. So, if I have this right, the JS implementation does not send the button because the button did not trigger the form action. Correct? Will all buttons not be sent via JS form submit or just the button with the onclick event? Thank you.

user3621633 Over a year ago

I just tested it out. For HTML, only the form button which triggered the event gets sent. For JS, no buttons are sent. Thanks again for your help!

Wolfgang Over a year ago

You're welcome. Another hint: If you need to post data based on a javascript submit() just include an input type="hidden" in your form and set this value onSubmit so it's getting included in the form.

user3621633 Over a year ago

Yup. Good tip. Thank you for the hint.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related