Set a form's action attribute when submitting?

Question

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

Solution 1

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

Solution 2

<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';

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

Comments

[Oded]

@dave - can you also explain why you can't set the action attribute to the required value before the submit?

[dave]

thats what I'm trying to figure out tbh.

[Oded]

@dave - I mean when rendering the HTML. And without seeing your code, I don't think any more help is possible.

[Michael Petito]

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.

[Edward Anderson]

Bravo for using the more appropriate submit event, instead of click.

[Paul]

This should be the top answer. I usually submit forms by hitting <enter> not by clicking anywhere.

[prime]

why use onSubmit="return xyz();" like this. can't we just have onSubmit="xyz()" ?

[Samolivercz]

is there a way i could set the form action to be equal to an option select, within the form?

[HPWD]

I completely for about the higher priority! That alone saved my as.. ahem, skin!

[xiawi]

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.

[Trevor F]

Thank you, worked perfectly and support is wide enough.