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.

Separate Form Submit Buttons That Go To Different URLs is a post from CSS-Tricks




Add a Comment

Your email address will not be published. Required fields are marked *