How can i change Form value Action based on dropdown value selected

Question

I have two forms the first form contains two drop-down element. I want the second form action value to be changed based on the drop-down values selected in form 1

Form 1

<form method="post" style="padding: 10px 0px 10px 5px;">
<label>Front/Rear Tire:<br/><select name="tire" class="first">
<option  value="">Select</option>
  <option  value="rear">Rear Tire</option>
  <option  value="front">Front Tire</option>

</select> </label>
  <label>Tractor Type:<br/><select name="tractor" class="second" disabled>
    <option value="">Select Type</option>
    <option value="2wd">2WD</option>
    <option value="mfwd">MFWD</option>
    <option value="4wd">4WD</option>

  </select>  </label>


</form>

Form 2 looks like

<form method="post" action="A.php" >
</form>

I want.

if rear Tire and (2WD or 4wd) Selected i want to change action value to 'A.php`
if Rear Tire and (MFWD) Selected i want to change action value to 'B.php`
if Front Tire and (2WD or $wd) Selected i want to change action value to 'C.php`
if front Tire and (MFWD) Selected i want to change action value to 'D.php`

Possible duplicate of [javascript - change form action based on selection?](http://stackoverflow.com/questions/1925614/javascript-change-form-action-based-on-selection) — Sean, May 06 '16 at 04:37
@guradio i tried using Javascript case but that doesn't change it — Kin, May 06 '16 at 04:38

Developer107 · Accepted Answer · 2016-05-06T05:05:24.470

1

I have used data-attributes for storing the file names. You need to make sure to keep names of attributes in first select same as values in second select.

<option  value="rear" data-2wd="A.php" data-4wd="A.php" data-mfwd="B.php" >Rear Tire</option>
<option  value="front" data-2wd="C.php" data-4wd="C.php" data-mfwd="D.php" >Front Tire</option>

Use change event with delegate on to fetch the change in select menu.

$("#one select").on("change",function(){
  var sel1 = $("select.second").find(":selected").val();
  var sel2 = $("#one select.first").find(":selected").attr("data-"+sel1);
  $("#two").attr("action",sel2);
})

Please refer this fiddle.

edited May 06 '16 at 05:05

answered May 06 '16 at 04:37

Developer107

1,728
2
14
24

What if I want to trigger the action when the button on the second form is clicked? – Kin May 06 '16 at 04:46
What I did was basic functionality. You need to add cases inside the `change` event – Developer107 May 06 '16 at 04:50
Thanks!! But as i have mentioned at the bottom of my question two dropdown are dependent in the case rear+2wd, rear+4wd,front+2wd, front+4wd will have different actions. How can i manage that? – Kin May 06 '16 at 05:05
Refer the updated fiddle in edit. Sorry I didn't understand your question earlier hence didn't consider the `second` select. – Developer107 May 06 '16 at 05:06
Thanks Its working but front and rear are in different directory/path your code works fine for all rear tires. which is Rear+2wd, rear+4wd, rear+MFWD but when select front+mfwd, showing me the rear page. – Kin May 06 '16 at 05:34
here is how i used ` ` – Kin May 06 '16 at 05:35
`data-2wd="iar-calculator.php"` is same for both `option` tags. Similarly for `data-4wd` and `data-mfwd`. Please set these values accordingly and check. – Developer107 May 06 '16 at 05:37
The files for the front tires stored outside directory or folder ..front/iar-calculator.php but for the rears its under the same directory so i can use just page name as iar-calculator.php` how can i call the front tire pages from rear tire page? – Kin May 06 '16 at 06:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111184/discussion-between-developer107-and-kin). – Developer107 May 06 '16 at 06:39

score 1 · Answer 2 · answered May 06 '16 at 04:43

it's possible to do with small jQuery code

<form method="post" style="padding: 10px 0px 10px 5px;">
<label>Front/Rear Tire:<br/><select name="tire" class="first">
<option  value="">Select</option>
  <option  value="rear">Rear Tire</option>
  <option  value="front">Front Tire</option>

</select id="drop"> </label>
  <label>Tractor Type:<br/><select name="tractor" class="second" disabled>
    <option value="">Select Type</option>
    <option value="2wd">2WD</option>
    <option value="mfwd">MFWD</option>
    <option value="4wd">4WD</option>

  </select>  </label>


</form>

<form method="post" action="A.php" id="form2">
</form>

<script>
  var drop=$('#drop');
  var form=$('#form2)

drop.change(function(){
  var a= drop.val();
  // here i show you how to add drop down value to form action
  form.attr('action',a);
})
</script>

How can i change Form value Action based on dropdown value selected

2 Answers2