Read more

HTML forms with multiple submit buttons

Henning Koch
July 28, 2018Software engineer at makandra GmbH

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

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

Posted by Henning Koch to makandra dev (2018-07-28 13:10)