How can I set the form action through JavaScript?

Question

I have an HTML form whose action should be set dynamically through JavaScript. How do I do it?

Here is what I am trying to achieve:

<script type="text/javascript">
    function get_action() { // Inside script tags
        return form_action;
    }
</script>

<form action=get_action()>
    ...
</form>

score 86 · Accepted Answer · edited Oct 24 '15 at 10:14

86

You cannot invoke JavaScript functions in standard HTML attributes other than onXXX. Just assign it during window onload.

<script type="text/javascript">
    window.onload = function() {
        document.myform.action = get_action();
    }

    function get_action() {
        return form_action;
    }
</script>

<form name="myform">
    ...
</form>

You see that I've given the form a name, so that it's easily accessible in document.

Alternatively, you can also do it during submit event:

<script type="text/javascript">
    function get_action(form) {
        form.action = form_action;
    }
</script>

<form onsubmit="get_action(this);">
    ...
</form>

edited Oct 24 '15 at 10:14

Peter Mortensen

30,738
21
105
131

answered Apr 23 '10 at 18:34

BalusC

1,082,665
372
3,610
3,555

Although, depending on markup this may not validate, the 'name' attribute is not a valid attribute in XML, its better to use an ID and use the getElementById – Rabbott Apr 23 '10 at 20:29
3

@Rabbott: It's HTML, not XML. XHTML is only interesting for server-side HTML-autogenerators like componentbased MVC frameworks. – BalusC Apr 23 '10 at 20:39

score 78 · Answer 2 · edited Oct 24 '15 at 10:15

78

Plain JavaScript:

document.getElementById('form_id').action; //Will retrieve it

document.getElementById('form_id').action = "script.php"; //Will set it

Using jQuery...

$("#form_id").attr("action"); //Will retrieve it

$("#form_id").attr("action", "/script.php"); //Will set it

edited Oct 24 '15 at 10:15

Peter Mortensen

30,738
21
105
131

answered Apr 23 '10 at 18:31

Rabbott

4,282
1
30
53

3

Hi, I think for plain JavaScript line 2: document.getElementById('form_id').action = "script.php" will retrieve it <-- This will SET it. – JoJo Nov 27 '12 at 20:47
1

It was a nice option, I used the Plain Javascript Option. I worked in the desktop view. But not getting that worked with mobile browsers – Shafeeque Sep 16 '14 at 10:50

score 9 · Answer 3 · edited Oct 24 '15 at 10:16

9

Very easy solution with jQuery:

$('#myFormId').attr('action', 'myNewActionTarget.html');

Your form:

<form action=get_action() id="myFormId">
...
</form>

edited Oct 24 '15 at 10:16

Peter Mortensen

30,738
21
105
131

answered Apr 20 '15 at 05:31

Piyush

3,947
9
36
69

score 4 · Answer 4 · edited Jul 19 '20 at 08:26

Actually, when we want this, we want to change the action depending on which submit button we press.

Here you do not need even assign name or id to the form. Just use the form property of the clicked element:

<form action = "/default/page" >
    <input type=submit onclick='this.form.action="/this/page";' value="Save">
    <input type=submit onclick='this.form.action="/that/page";' value="Cancel">
</form>

score 3 · Answer 5 · edited Jul 19 '20 at 08:27

3

Change the action URL of a form:

 <form id="myForm" action="">

     <button onclick="changeAction()">Try it</button>

 </form>

 <script>
     function changeAction() {

         document.getElementById("myForm").action = "url/action_page.php";
     }
 </script>

edited Jul 19 '20 at 08:27

Peter Mortensen

30,738
21
105
131

answered Apr 22 '20 at 19:06

TheLastCodeBender

538
5
10

score 2 · Answer 6 · answered Apr 23 '10 at 18:30

2

document.forms[0].action="http://..."

...assuming it is the first form on the page.

answered Apr 23 '10 at 18:30

Diodeus - James MacFarlane

112,730
33
157
176

this might work, but i am still trying to make it work by getting the action string from a function. is there no way to do it like that? – umar Apr 23 '10 at 18:31
You can write it in an `onsubmit` event handler to make sure it always gets just just before submission. However, in general trying to change a form action from script is a code smell; unless you don't control the server side, it's usually better to make the form accept two+ different submission modes. – bobince Apr 23 '10 at 18:53

score 1 · Answer 7 · edited Nov 24 '11 at 00:07

1

Do as Rabbott says, or if you refuse jQuery:

<script type="text/javascript">
function get_action() { // inside script tags
  return form_action;
}
</script>

<form action="" onsubmit="this.action=get_action();">
...
</form>

edited Nov 24 '11 at 00:07

Jonathan Leffler

730,956
141
904
1,278

answered Apr 23 '10 at 18:33

Svante Svenson

12,315
4
41
45

score 0 · Answer 8 · edited Jun 20 '20 at 09:12

Setting form action after selection of option using JavaScript

<script>
    function onSelectedOption(sel) {
        if ((sel.selectedIndex) == 0) {
            document.getElementById("edit").action =
            "http://www.example.co.uk/index.php";
            document.getElementById("edit").submit();
        }
        else
        {
            document.getElementById("edit").action =
            "http://www.example.co.uk/different.php";
            document.getElementById("edit").submit();
        }
    }
</script>

<form name="edit" id="edit" action="" method="GET">
    <input type="hidden" name="id" value="{ID}" />
</form>

<select name="option" id="option" onchange="onSelectedOption(this);">
    <option name="contactBuyer">Edit item</option>
    <option name="relist">End listing</option>
</select>

How can I set the form action through JavaScript?

8 Answers8

Setting form action after selection of option using JavaScript

Linked

Related