javascript onchange with 2 different dropdown lists

Question

Im pretty new with javascript programming.

I have some .php code, where 2 dropdown lists (in the same FORM) are populated by 2 different mysqli queries, this works without any problem.

Im trying to get javascript to handle the selected parts of the dropdown lists, with onchange, this works for only one dropdown list, and i cant really figure out how to get around this one.

This is the code that works with one dropdown menu, and it updates automaticly the page without submitting:

$chosen_location = $_GET['Lid']; 

$chosen_car = $_GET['Cid'];
?>

<script type="text/javascript">
  function changeDropDown(dropdown){

  var location = dropdown.options[dropdown.selectedIndex].value;
  *var car = dropdown.options[dropdown.selectedIndex].value;*

     document.getElementById("form1").action = "test.php?Lid=" + location + "&Cid=" + car;
     document.getElementById("form1").submit();
   }
</script>

Part of the .php code:

<select size="1" name="form_location_id" id="form_location_id" onchange='changeDropDown(this);'>
<option value = <?php echo ($location_id) ?> selected><?php echo ($location_name) ?></option>

<select size="1" name="form_car" id="form_car" onchange='changeDropDown(this);'>
<option value = <?php echo ($car_type_id) ?>><?php echo "" . ($car_class) . " - " . ($car_manufacturer) . " - " . ($car) . "" ?></option>

The italic marked I know will not catch the correct value, but this is where im at right now...

How is it possible to get an action URL with both selected values ? as this is going to be used in a mysqli query to show data from the actual selection

Thanks in advance... :)

Answer 1

Currently, you are submitting the form through JavaScript. If the selects are inside the form, their values will automatically be submitted when you submit the form. You don't even have to change the action of the form.

So, you can just generate a normal form (including submit button, if you will), and it will work. Then, add a little JavaScript sauce to make it submit automatically.

The code below does just that. JavaScripts adds a class to the body. This is a way to easily change styling based on JavaScript being enabled or not. In this case, I use it to hide the submit button, which is only needed in a non-JavaScript situation.

Then, I bind the on change handler, not unlike yours, to submit the form when a value is selected. By giving the selects a proper name, their values will automatically be added as intended.

Note how the event handlers are bound through code. You don't have to hardcode any calls to JavaScript in the HTML, so you can keep the HTML clean and separate (readability!).

// Bind to load event of the window. Alternatively, put the script at the end of the document.
window.addEventListener("load", function() {

  // Indicate that JavaScript works. You can use this to style the document, for instance
  // hide the submit button, if the form is automatically submitted on change..
  document.body.classList.add("js");

  // With JavaScript, you can automatically submit the form, but you still don't have to modify it.
  var theform = document.getElementById("theform");
  var selects = document.querySelectorAll("#theform select");

  for (var i = 0; i < selects.length; ++i) {

    selects[i].addEventListener("change",
      function() {
        alert("submitting now");
        theform.submit();
      });

  }
});

.js button[type="submit"] {
  display: none;
}

<!-- Just a form with selects is enough. You don't even have to have JavaScript to post this. -->
<form id="theform" action="test.php" method="get">
  <select name="Lid">
    <option>Example...</option>
    <option>Use PHP,</option>
    <option>to fill these.</option>
  </select>
  <select name="Cid">....</select>
  <button type="submit">Post</button>
</form>