HTML forms with multiple submit buttons

Most forms have a single submit button that will save the record when pressed.

Sometimes a form needs additional submit buttons like "accept" or "reject". Such buttons usually attempt a state transition while updating the record.

To process a form with multiple buttons, your server-side code will need to know which button was pressed. To do so you can give each submit button a different [formaction] Show archive.org snapshot attribute. This will override the form's [action] attribute and hence cause the browser to POST the form to another URL.

Example

Below is an example of a form for a "story". It has three submit buttons.

<form action="/storys/5">

  <!-- form fields here -->

  <button type="submit">Save changes</button>
  <button type="submit" formaction="/deals/5/accept">Accept story</button>
  <button type="submit" formaction="/deals/5/reject">Reject story</button>

</form>

Support

This [formaction] attribute is supported in all browsers and IE11 Show archive.org snapshot .

Unpoly Show archive.org snapshot 's form submission supports it since version 2.0.

Pitfalls

If you press enter on a field in a form it submits it using the first submit button in the form.

Henning Koch Over 5 years ago