html - Manually submitting a form using JavaScript doesn't send the submit button - Stack Overflow

admin管理员组

文章数量:1277894

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 plete 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.

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 plete 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.

• javascript
• html
• forms
• submit
• form-submit

Share Improve this question Follow edited Dec 20, 2011 at 12:38 Abdul Munim 19.2k88 gold badges5454 silver badges6161 bronze badges asked Dec 20, 2011 at 12:33 user265330user265330 2,55377 gold badges3232 silver badges4343 bronze badges 2

• 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 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 Commented Dec 20, 2011 at 12:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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

本文标签： htmlManually submitting a form using JavaScript doesn39t send the submit buttonStack Overflow