Changing form action based on select value - with JavaScript

Question

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>

Possible duplicate of [How to set form action through JavaScript?](https://stackoverflow.com/questions/2701041/how-to-set-form-action-through-javascript) — Matt Healy, Mar 11 '18 at 15:04

Steve Westgarth · Accepted Answer · 2018-03-11T15:27:22.013

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.

score 1 · Answer 2 · answered Mar 11 '18 at 15:19

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>

score 0 · Answer 3 · answered Mar 11 '18 at 15:08

0

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>

answered Mar 11 '18 at 15:08

RohitIUC

261
2
11

Are you able to provide the associated JavaScript with your answer? – Samolivercz Mar 11 '18 at 15:10
This is a simple code, without using associated javascript. – RohitIUC Mar 11 '18 at 15:18

Changing form action based on select value - with JavaScript

3 Answers3