HTML forms with multiple submit buttons

Updated . Posted . Visible to the public. Repeats.

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 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
Last edit
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2018-07-28 11:10)