Sometimes you want to intercept forms with Javascript to send them to the server via AJAX. But when the submit button contains a name/value pair, you’ve got a problem. That info is lost from the data, that you want to send to the server, and it is quite cumbersome to reliably get it back.

But despair not! Hyperform comes to the rescue. When you catch the submit event, it will now have a new property submittedVia. This is the element, that triggered the submit, in most cases the submit button.

<form id="button_name">
  <p>
    <button name="foo" value="bar">Send <code>foo=bar</code></button>
    <button name="foo" value="quux">Send <code>foo=quux</code></button>
  </p>
</form>

<script>
hyperform(window);

document.getElementById('button_name')
  .addEventListener('submit', function(event) {
    /* do not submit the form, because we'll do that later */
    event.preventDefault();
    event.stopPropagation();

    alert('Will submit ' + event.submittedVia.name +
          '=' + event.submittedVia.value);

    /* now you can construct your AJAX data easily,
     * e.g. with the FormData API: */
    var data = new FormData(event.target);
    data.append(event.submittedVia.name, event.submittedVia.value);
  });
</script>