Manually submitting a form using JavaScript doesn't send the submit button

Question

I have a form that has two submit buttons. I want to submit the form manually using JavaScript and have the input button used to submit the form posted along with the other form elements, as it would be if the form was submitted automatically. There's quite a lot of chatter on this subject, but I can't find an 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 "Do One" button, the posted parameters are 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 doing a manual submission of the form in the mySubmit function does not post the sub1_name parameter. I can understand that - I've bypassed the submission so the form is not being submitted using the buttons and therefore it makes no sense to post a parameter representing the button used to submit the form.

When I look at the elements of the form in the onclick handler, I can see both buttons. I'm not overly surprised by that either, they are elements on the form after all, but what I don't get is that if I add an element inside my onclick handler then the element I add IS posted and the two original submit buttons are not posted. Just to complete the picture, here's 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 the input element could work for me, but I'm confused how the browser knows to post my added element and not the original two input elements.

Thank you.

f is just a pointer to the form, thus updates carry over. You just have to capture the button that triggered your function and put it in the element. Why would you worry about adding your custom submit anyways? I think you could try adding an onclick methode wich returns true or false, thus deciding weather or not to submit the data by the default method and just to your checking in there and leavinge the actual submission to the browser. Hope this works, at least for hyperlinks it does. — ted
– ted, Commented Dec 20, 2011 at 12:47
What exactly does mySubmit do? Any reason you can't use the form's onsubmit and let the form submit normally after doing every you need to do in your script? — RoToRa
– RoToRa, Commented Dec 20, 2011 at 12:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

The specification says that the first step for form submission is:

Step one: Identify the successful controls

"Successful controls" are defined as:

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

However:

...

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

Since none of the submit buttons are activated, none are sent. Hidden input elements, on the other hand, are valid and will just be submitted along. Note that you add the hidden elements before calling mySubmit(), so at the time the above steps are executed (i.e. during submit), the hidden element is just another successful control part of the form, and thus sent.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 20, 2011 at 12:46

pimvdb

155k80 gold badges313 silver badges357 bronze badges

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

Comments

Андрей Петров · Accepted Answer · 2011-12-20 12:50:35Z

4

may 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()
}

answered Dec 20, 2011 at 12:50

Андрей Петров

1494 bronze badges

Collectives™ on Stack Overflow

Manually submitting a form using JavaScript doesn't send the submit button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related