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... :)

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... :)

• javascript
• php

• Have you missed some code? PHP is not closed before the script. – rybo111 Commented Aug 1, 2015 at 18:06
• Ahh sorry, that's my bad, as i only copy/pasted the code that should illustrate the problem, it's actually closed before the script ;) – BulletEyeDK Commented Aug 1, 2015 at 18:07
• OK. Also, your option values should be inside quotes, echo doesn't need brackets, and echo "". is unnecessary. – rybo111 Commented Aug 1, 2015 at 18:10
• Thansk for the heads up on that one ;) – BulletEyeDK Commented Aug 1, 2015 at 18:24

4 Answers 4

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>

You can update your code to following

function changeDropDown(){
   var elLocation = document.getElementById('form_location_id');
   var elCar = document.getElementById('form_car');
   var location = elLocation.options[elLocation.selectedIndex].value;
   var car = elCar.options[elCar.selectedIndex].value;

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

try to do this

<script>
  // get select elements
  var form_location_id = document.getElementById('form_location_id');
  var form_car = document.getElementById('form_car');

  // on change
  form_location_id.addEventListener('change', changeDropDown1);
  form_car.addEventListener('change', changeDropDown2);
</script>

And change the 'changeDropDown1' and 'changeDropDown2' to your handler function

try this

<script type="text/JavaScript">

var dropdownLocation = document.getElementById("form_location_id");
var dropdownCar = document.getElementById("form_car");

function changeDropDown() {

    var location = dropdownLocation.options[dropdownLocation.selectedIndex].value;
    var car = dropdownCar.options[dropdownCar.selectedIndex].value;

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

}
</script>

dropdownLocation et dropdownCar are outside the function to save time because this 2 vars need only to be set one time