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.
<form> when the button was clicked. There are any number of ways to do that, but it boils down to:
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
LEAVE A REPLY
You must be logged in to post a comment.