How can I set the form action through JavaScript?

JavascriptHtmlForms

Javascript Problem Overview


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>

Javascript Solutions


Solution 1 - Javascript

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>

Solution 2 - Javascript

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

Solution 3 - Javascript

Very easy solution with jQuery:

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

Your form:

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

Solution 4 - Javascript

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>

Solution 5 - Javascript

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

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

Solution 6 - Javascript

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>

Solution 7 - Javascript

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>

Solution 8 - Javascript

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionumarView Question on Stackoverflow
Solution 1 - JavascriptBalusCView Answer on Stackoverflow
Solution 2 - JavascriptRabbottView Answer on Stackoverflow
Solution 3 - JavascriptPiyushView Answer on Stackoverflow
Solution 4 - JavascriptEugen KonkovView Answer on Stackoverflow
Solution 5 - JavascriptDiodeus - James MacFarlaneView Answer on Stackoverflow
Solution 6 - JavascriptTheLastCodeBenderView Answer on Stackoverflow
Solution 7 - JavascriptSvante SvensonView Answer on Stackoverflow
Solution 8 - JavascriptMichaelView Answer on Stackoverflow