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 UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
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)