Manually submitting a form using JavaScript does not submit the submit button

Question

I have a form in which there are two submit buttons. I want to submit the form manually using JavaScript and use the enter button to submit the form placed along with other form elements, as it would if the form was submitted automatically. There are quite a lot of chatter on this subject, but I can not find the answer.

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> <input id="field1" name="field1"/> <input type="text" size="20" id="field2" name="field2"/> <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> </form> 

When the form is submitted above using the "Make One" button, the published parameters field1="xxx" , field2="yyy" , sub1_name="Do One" .

But I want to submit the form manually ...

 <form method="post" action="echoToScreenAndLog.jsp" id="form1"> <input id="field1" name="field1"/> <input type="text" size="20" id="field2" name="field2"/> <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> </form> <script type="text/javascript"> var btn = document.getElementById('sub1_id'); btn.onclick=function() { return mySubmit(document.getElementById('form1'), ...); } </script> 

but when manually submitting the form, the mySubmit parameter is not published in the sub1_name . I can understand this - I circumvented the submission, so the form does not appear using buttons, so it makes no sense to publish a parameter representing the button used to submit the form.

When I look at form elements in the onclick handler, I see both buttons. I'm also not too surprised by this, they are still form elements, but I don’t understand that if I add an element inside my onclick handler, then the element that I add is sent and the two originals of the submit button are not published. Just to complete the image, here is the code that adds the element:

 <script type="text/javascript"> var btn = document.getElementById('sub1_id'); btn.onclick=function() { var f = document.getElementById('form1'); var s = document.createElement("input"); s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id"; f.appendChild(s); // s gets posted return mySubmit(f, ...); } </script> 

Adding an input element may work for me, but I'm confused by the way the browser knows how to publish my added element, and not the original two input elements.

Thanks.

Answer 1

the spec says the first step to submit the form:

Step One: Identify Successful Controls

Successful controls are defined as:

Successful management is “valid” for submission. Each successful control has its own control name paired with its current value as part of the presented form dataset. Successful control must be defined inside the FORM element and must have the name of the control.

However:

...

• If the form contains more than one submit button, only the activated submit button is successful.

Since none of the submit buttons is activated, none of them are sent. Hidden input elements, on the other hand, are valid and will only be presented together. Please note that you add hidden elements before calling mySubmit() , so during the above steps (i.e., during submit), the hidden element is another successful control part of the form and thus is submitted.

Answer 2

can use

 var btn = document.getElementById('sub1_id'); btn.onsubmit=function() { return false; } btn.onclick=function() { var f = document.getElementById('form1'); var s = document.createElement("input"); s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id"; f.appendChild(s); f.submit() }