I have a form that I wish to change the action of, depending on what value a user selects in a drop down box.

The example code below shows each option value, I want to change the form action to whatever option value is chosen on a button press, how can I do this with JavaScript?

 <form name ="form1" action="VariableFormAction" method ="post" target="_blank">

<select name="formchoice">



<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>

</select>
<input type="submit" value="Go" class="button">
</form>

I have a form that I wish to change the action of, depending on what value a user selects in a drop down box.

The example code below shows each option value, I want to change the form action to whatever option value is chosen on a button press, how can I do this with JavaScript?

 <form name ="form1" action="VariableFormAction" method ="post" target="_blank">

<select name="formchoice">



<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>

</select>
<input type="submit" value="Go" class="button">
</form>

• javascript
• html
• forms

• 1 Possible duplicate of How to set form action through JavaScript? – Matt Healy Commented Mar 11, 2018 at 15:04

3 Answers 3

In order to do this you need to specify an onSubmit JavaScript event handler on the form that retrieves the value of the select list and updates the form action.

You can do this using the following code.

//Add onSubmit() event handler to form to call JavaScript method when the form is submitted.
<form name ="form1" onSubmit="actionOnSubmit()" method ="post" target="_blank">

<select id="formchoice" name="formchoice">

<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>

</select>
<input type="submit" value="Go" class="button">
</form>


<script>

function actionOnSubmit()
{

//Get the select select list and store in a variable
var e = document.getElementById("formchoice");

//Get the selected value of the select list
var formaction = e.options[e.selectedIndex].value;

//Update the form action
document.form1.action = formaction;

}
</script>

Note, for this to work you will need to make sure the select list has an id as you are using the document.getElementById[] JavaScript method to retrieve the value of the control.

You could also call the JavaScript in the OnChange() event of the control. The issue with this is that it implies that the value has changed before the form is submitted. If the user simply left the default select list value it is possible that the OnChange() event would never fire.

You can try like following.

 function selectChanged(ctrl) {
    var val = ctrl.value;
    var frm = document.getElementById('form1');
    frm.action = val;
  }

<form id="form1" name="form1" action="/formaction1" method="post" target="_blank">
  <select name="formchoice" onchange="selectChanged(this)">
    <option value="/formaction1">function 1</option>
    <option value="/formaction2">function 2</option>
   <option value ="/formaction3">function 3</option>
 </select>
  <input type="submit" value="Go" class="button">
</form>

Use on change attribute.

<select name="forma" onchange="location = this.value;">
    <option value="Home.php">Home</option>
    <option value="Contact.php">Contact</option>
    <option value="Sitemap.php">Sitemap</option>
</select>