title: jQuery serializeArray doesn't include the submit button that was clicked
body: <p>I have a form that has two buttons. One for saving a record and the other for cancelling the save procedure. I am using the <code>rails.js</code> <em>(a common AJAX/jQuery plug-in for those of you not in the know)</em>  javascript file that works with jQuery for unobtrusive javascript/ajax calls. When I send the form data over ajax, I want the name and value of the button I clicked to be submitted with the rest of the data so that I can make a decision on what to do based on which button was clicked.</p>
  
  <p>The method in the <code>rails.js</code> file uses <code>.serializeArray()</code> for sending form data to the server. The problem is that this doesn't include the name/value pair of the button I've clicked. jQuery's website states that they do this on purpose (eventhough its my opinion that they should):</p>
  
  <p>"The <code>.serializeArray()</code> method uses the standard W3C rules for <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2" rel="noreferrer">successful controls</a> to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button."</p>
  
  <p>How can they assume that a form WASN'T submitted using a button? This makes no sense and a wrong assumption I believe.</p>
  
  <p>Under the W3C rules the button which was activated for the submission of a form is considered a <strong>successful control</strong>.</p>
  
  <p>Since the developers of jQuery have decided to do this on purpose, can I assume that there is another method that <strong>DOESN'T</strong> exclude the activated button in a serialization?</p>
  
  <p><strong>EDIT: Here is quick example of what my form might look like...</strong></p>
  
  <pre><code>&lt;!DOCTYPE html5&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      $('#form').submit(function(e) {
        // put your breakpoint here to look at e
        var x = 0;
      });
    });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form id="form"&gt;
      &lt;input name="name" type="text"&gt;&lt;br/&gt;
      &lt;input name="commit" type="submit" value="Save"/&gt;
      &lt;input name="commit" type="submit" value="Cancel"/&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>