title: Manually submitting a form using JavaScript doesn't send the submit button
body: <p>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.</p>
  
  <pre><code>&lt;form method="post" action="echoToScreenAndLog.jsp" id="form1"&gt; 
      &lt;input id="field1" name="field1"/&gt;
      &lt;input type="text" size="20" id="field2" name="field2"/&gt;
  
      &lt;input type="submit" value="Do One" name="sub1_name" id="sub1_id"/&gt;
      &lt;input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>When the form is submitted above using the "Do One" button, the posted parameters are <code>field1="xxx"</code>, <code>field2="yyy"</code>, <code>sub1_name="Do One"</code>.</p>
  
  <p>But I want to submit the form manually...</p>
  
  <pre><code>&lt;form method="post" action="echoToScreenAndLog.jsp" id="form1"&gt; 
      &lt;input id="field1" name="field1"/&gt;
      &lt;input type="text" size="20" id="field2" name="field2"/&gt;
  
      &lt;input type="submit" value="Do One" name="sub1_name" id="sub1_id"/&gt;
      &lt;input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/&gt;
  &lt;/form&gt; 
  &lt;script type="text/javascript"&gt;
      var btn = document.getElementById('sub1_id');
      btn.onclick=function() {
          return mySubmit(document.getElementById('form1'), ...);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>but doing a manual submission of the form in the <code>mySubmit</code> function does not post the <code>sub1_name</code> 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.</p>
  
  <p>When I look at the elements of the form in the <code>onclick</code> 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 <code>onclick</code> 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:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      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, ...);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you.</p>