Separate Form Submit Buttons That Go To Different URLs

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.