36

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

Deduplicator
  • 41,806
  • 6
  • 61
  • 104
dave
  • 12,827
  • 23
  • 66
  • 104

7 Answers7

51
<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';
rogerdpack
  • 50,731
  • 31
  • 212
  • 332
James
  • 14,812
  • 2
  • 21
  • 36
  • 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. – Michael Petito Sep 18 '13 at 19:36
  • is there a way i could set the form action to be equal to an option select, within the form? – Samolivercz Mar 10 '18 at 14:59
29

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

Nathan Friedly
  • 7,377
  • 3
  • 35
  • 57
20

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.

Paul
  • 130,653
  • 24
  • 259
  • 248
Bhavik Shah
  • 281
  • 3
  • 9
15

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

Oded
  • 463,167
  • 92
  • 837
  • 979
  • @dave - can you also explain why you can't set the `action` attribute to the required value _before_ the submit? – Oded Apr 12 '11 at 20:10
  • thats what I'm trying to figure out tbh. – dave Apr 12 '11 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 '11 at 20:28
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;
}
hexacyanide
  • 76,426
  • 29
  • 148
  • 154
Priyank
  • 9,883
  • 2
  • 24
  • 24
1

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>
user2099484
  • 3,555
  • 2
  • 16
  • 9
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>
xiawi
  • 1,648
  • 4
  • 16
  • 19
VaChinaka
  • 11
  • 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 '19 at 15:43