This came up the other day. I forget where, but I jotted it down in my little notepad for blog post ideas. I wrote it down because what I was overhearing was way over-complicating things.
Say you have a form like this:
<form action="/submit">
<!-- inputs and stuff -->
<input type="submit" value="Submit">
</form>
When you submit that form, it’s going to go to the URL `/submit`. Say you need another submit button that submits to a different URL. It doesn’t matter why. There is always a reason for things. The web is a big place and all that.
I web searched around for other ways people have tried handling this.
One way was to give up on submitting to different URL’s, but give each submit button a shared name
but different value
, then check for that value when processing in order to do different things.
<input type="submit" name="action" value="Value-1">
<input type="submit" name="action" value="Value-2">
You could read that value during your processing and redirect if you desired. But that’s a workaround for the stated problem.
Another way was to use JavaScript to change the action of the <form>
when the button was clicked. There are any number of ways to do that, but it boils down to:
<form name="form">
<!-- inputs and stuff -->
<input type="submit" onclick="javascript: form.action='/submit';">
<input type="submit" onclick="javascript: form.action='/submit-2';">
</form>
Which of course relies on JavaScript to work, which isn’t a huge deal, but isn’t quite as progressive enhancement friendly as it could be.
The correct answer (if I may be so bold) is that HTML has this covered for you already. Perhaps it’s not as well-known as it should be. Hence the blog post here, I suppose.
It’s all about the formaction
attribute, which you can put directly on submit buttons, which overrides the action
on the form itself.
<form action="/submit">
<input type="submit" value="Submit">
<input type="submit" value="Go Elsewhere" formaction="/elsewhere">
</form>
That’s all. Carry on.
Good tip, thanks for sharing!
Might be worth mentioning that this attribute isn’t supported in IE9 or below.
http://caniuse.com/#feat=form-submit-attributes
What honestly is supported in IE9 and lower?
Tables
Neat! I didn’t know about
formaction
. It looks like it has good browser support too, all the way back to IE 10.Thanks for posting Chris! Yet another lesser used attribute that is worth knowing about.
Based on the browser support information I could find online this won’t work in IE9. IE10 upwards will support it. It’s been in Chrome, Opera and Firefox for some time and Safari since 5.1.
Awesome! I completely missed this in HTML 5. Looking forward to replacing our method 1 forms with this. Thanks!
WOW!!! I tried to face this a few weeks ago and did something else at the end (can`t remember how).
And this solution look great
Thanks
Maybe I need to think about this more, but I can’t imagine a form that would require two submit buttons. You are posting back to the server, make the server decide what to do based on the information received … right?
It’s much easier to check a box that says “pay deposit only” then submit than undo the pressing of the button that says “pay full amount” (followed by the exclamation of expletives).
People are really smart and the easiest way to test this assumption is place two submit buttons on a page.
Just my 2 cents!
There are definitely reasons… Maybe you have a financial portfolio site. One button Generates a CSV with your chosen tickers, one exports to Excel, and one button creates a chart. In all three cases, the code that does the work will do considerably different things. While you COULD combine this into one place, you may be dealing with constraints like not wanting to take apart that Excel Exporting plug-in to incorporate it into the Chart-making plug-in.
Or maybe you need to track each one as a separate page-view and your SEO specialist wants to keep specific URLs for these elements… and you can’t use Google Analytics, because it’s for the Chinese market, or because you have business rules setup that require you to track end urls, etc.
There are many reasons to do things in a non-conventional manner.
I guess we’ll have to agree to disagree.
While I see the importance in giving UI elements to achieve certain functions, I still contend that they should not be part of the same form. For instance, to generate a CSV/Excel, I would use an ‘a’ tag that goes to a page that generates the file to download (we currently do that all the time) … no postback/submit needed. Need a button to create a chart — we use JS to fetch the JSON feed from another page (server side code pulling data from a table) … no postback/submit needed.
Using the above approach also gives you the added benefit of SEO/unique URLs.
To reiterate my point, yes, I won’t argue that you need various UI components to achieve certain results, but specifically having multiple submit buttons as part of the same form is not a good idea … IMO.
That is … surprisingly useful.
I just checked, and yes there is also a formmethod attribute.
Lovely! Never knew that, thank you!!
Thanks for the tip!
Very useful! What I still miss more than anything is to mark a submit button as the default. Right now it’s up to the browser. You can mark the default button with
:default
, but you can’t change the default. It’s probably the first, but I don’t think it’s specced, and still unchangeable =( so multiple buttons is always dangerous.reminds me when little of fluffing some lego bits to do something, only to find a bit that was made for the job at the bottom of the box 6 months later!
My immediate thought for a use of this excellent sounding code tip would be on a form to send messages via a contact form…. each department has a submit button, no need for drop down lists or checkboxes.