45

How do I change a form's action attribute right after clicking the submit button?

7 Answers 7

59
<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';
2
  • 6
    This 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
35

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
  • 1
    Thank you, worked perfectly and support is wide enough.
    – Trevor F
    Apr 9, 2021 at 16:29
23

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.

4
  • 2
    Bravo for using the more appropriate submit event, instead of click. Apr 25, 2015 at 23:28
  • 1
    This should be the top answer. I usually submit forms by hitting <enter> not by clicking anywhere.
    – Paul
    Dec 5, 2015 at 0:28
  • why use onSubmit="return xyz();" like this. can't we just have onSubmit="xyz()" ?
    – prime
    Feb 11, 2016 at 7:15
  • I completely for about the higher priority! That alone saved my as.. ahem, skin!
    – HPWD
    Oct 11, 2018 at 23:30
16

Attach to the submit button click event and change the action attribute in the event handler.

4
  • 1
    @dave - can you also explain why you can't set the action attribute to the required value before the submit?
    – Oded
    Apr 12, 2011 at 20:10
  • thats what I'm trying to figure out tbh.
    – dave
    Apr 12, 2011 at 20:24
  • @dave - I mean when rendering the HTML. And without seeing your code, I don't think any more help is possible.
    – Oded
    Apr 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.
    – gurkan
    Oct 7 at 14:01
4

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;
}
0
2

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>
1

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>

1
  • 2
    While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.
    – xiawi
    Nov 14, 2019 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.