How do I change a form's action attribute right after clicking the submit button?
7 Answers
<input type='submit' value='Submit' onclick='this.form.action="somethingelse";' />
Or you can modify it from outside the form, with javascript the normal way:
document.getElementById('form_id').action = 'somethingelse';
-
6This is a nice concise example. Beware though that if you have validation that takes place on form submission, and if that validation fails after clicking this button, then clicking a different submit button may still invoke the newly set action. Sep 18, 2013 at 19:36
-
is there a way i could set the form action to be equal to an option select, within the form? Mar 10, 2018 at 14:59
There's a simple way to do this if you only need to support modern browsers: on your submit button, add a formaction="/alternate/submit/url"
attribute like so:
<form>
[fields]
<input type="submit" value="Submit to a" formaction="/submit/a">
<input type="submit" value="submit to b" formaction="/submit/b">
</form>
It also works on <button>
tags.
The gotcha is that old versions of IE (<10) and the Android Browser (<4.0) do not support it. So, if you need to support older browsers, then the existing JS answers will probably work better for you.
More info: http://www.wufoo.com/html5/attributes/13-formaction.html
-
1
You can also set onSubmit
attribute's value in form tag. You can set its value using Javascript.
Something like this:
<form id="whatever" name="whatever" onSubmit="return xyz();">
Here is your entire form
<input type="submit">
</form>;
<script type=text/javascript>
function xyz() {
document.getElementById('whatever').action = 'whatever you want'
}
</script>
Remember that onSubmit
has higher priority than action attribute. So whenever you specify onSubmit
value, that operation will be performed first and then the form will move to action.
-
2Bravo for using the more appropriate submit event, instead of click. Apr 25, 2015 at 23:28
-
1This should be the top answer. I usually submit forms by hitting
<enter>
not by clicking anywhere.– PaulDec 5, 2015 at 0:28 -
why use
onSubmit="return xyz();"
like this. can't we just haveonSubmit="xyz()"
?– primeFeb 11, 2016 at 7:15 -
I completely for about the higher priority! That alone saved my as.. ahem, skin!– HPWDOct 11, 2018 at 23:30
Attach to the submit button click
event and change the action
attribute in the event handler.
-
1@dave - can you also explain why you can't set the
action
attribute to the required value before the submit?– OdedApr 12, 2011 at 20:10 -
-
@dave - I mean when rendering the HTML. And without seeing your code, I don't think any more help is possible.– OdedApr 12, 2011 at 20:28
-
The valid answer even after years, but you should note that the
action
attribute that needs to be changed will be for the<form>
, not for the<button
.– gurkanOct 7 at 14:01
You can do that on javascript side .
<input type="submit" value="Send It!" onClick="return ActionDeterminator();">
When clicked, the JavaScript function ActionDeterminator() determines the alternate action URL. Example code.
function ActionDeterminator() {
if(document.myform.reason[0].checked == true) {
document.myform.action = 'http://google.com';
}
if(document.myform.reason[1].checked == true) {
document.myform.action = 'http://microsoft.com';
document.myform.method = 'get';
}
if(document.myform.reason[2].checked == true) {
document.myform.action = 'http://yahoo.com';
}
return true;
}
HTML5's formaction does not work on old IE browsers. An easy fix, based on some of the responses above, is:
<button onclick="this.form.action='/PropertiesList';"
Account Details </button>
You can try this:
<form action="/home">
<input type="submit" value="cancel">
<input type="submit" value="login" formaction="/login">
<input type="submit" value="signup" formaction="/signup">
</form>
-
2While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.– xiawiNov 14, 2019 at 15:43