Set a form's action attribute when submitting?

Question

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

Unique

Answer 1

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

Jaquelynjaquenetta

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

thats what I'm trying to figure out tbh. – Unique

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

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. – Xiphoid

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

Jit

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. – Reflation

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

Answer 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

Colous

Thank you, worked perfectly and support is wide enough. – Condolence

Answer 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.

Partition

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

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

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

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

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

Bosk

Answer 6

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>

Triclinium

Answer 7

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>

Merissameristem

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. – Lexie