Posted about 2 years ago. Visible to the public. Repeats.

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] 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.

Copy
<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.

It is currently (0.62.1) not supported by Unpoly's form submission.

Pitfalls

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

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Henning Koch
Last edit:
14 days ago
by Martin Schaflitzl
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more