Just Another Tech Journal



Form With Multiple Buttons

08 MARCH 2013

Suppose you have a form and you need to have two buttons that post to different locations - button "Accept" posts to /accept and button "Reject" posts to /reject.

Without HTML5, you probably have to use JavaScript..

HTML5 makes it trivial, as it introduced the concept of form and form-associated element.

By default, the form owner of a submit input is the nearest form element ancestor, and it would perform the action and go to the location that was specified in the form tag.

However, HTML5 allows you to specify form attribute (and more) on an input tag to override its default form association.

In code, that means you can do the following:

<form id="myform">
  <input id="name" name="name" type="text">

<input type="submit" value="Accept" form="myform" formmethod="POST" formaction="/accept">
<input type="submit" value="Reject" form="myform" formmethod="POST" formaction="/reject">

Side note.. To test this in Rspec + Capybara, specs have to run with a JavaScript driver.

I really dig this.

comments powered by Disqus