JS: How to reload the same webpage with param on dropdown change event?

Question

I have a form in vehicles.php:

<form name='vehicleform'>

<select name='vehiclelist'>
  <option value=''>Select</option>
  <option value='bus'>Bus</option>
  <option value='bike'>Bike</option>
  <option value='car'>Car</option>
</select>

<input type='text' name='current'></input>

</form>

When user open vehicle.php first time then in dropdown, 'Select' option will be selected and textbox(current) will be empty. When user select any option from dropdown then page reload and that dropdown item should be selected and value of that dropdown should be in textbox(current).

I need a simple js function and not a complex method. Any idea?

Thanks

Answer 1

Like this:

<select name='soemname' id="myid" onchange="document.location.href = 'page.php?var=' + this.value">
  <option value=''>Select</option>
  <option value='bus'>Bus</option>
  <option value='bike'>Bike</option>
  <option value='car'>Car</option>
</select>

<script type="text/javascript">
  document.getElementById('myid').value = "<?php echo $_GET['var'];?>";
</script>

Answer 2

sAc's answer tells you how you can use the onchange event to modify the location.href property. This will work, but it's not accessible to users with JS disabled. I would set a url in the form's action attribute and have the select element submit the form in the onchange event. This way, users with JavaScript can still press the return key to reload the page with the same effect:

<?php $sel = isset($_GET['vehiclelist']) ? $_GET['vehiclelist'] : ""; ?>
<form name='vehicleform' action="thispage.php">

<select name='vehiclelist' onchange="this.parentNode.submit();">
  <option value='' >Select</option>
  <option value='bus' <?php echo $sel == "bus" ? "selected" : "";?>>Bus</option>
  <option value='bike' <?php echo $sel == "bike" ? "selected" : "";?>>Bike</option>
  <option value='car' <?php echo $sel == "car" ? "selected" : "";?>>Car</option>
</select>

<input type='text' name='current' value="<?php echo htmlspecialchars($_GET['var']); ?>"></input>

</form>

The end result is a feature that is accessible to users with JavaScript disabled too.