Geek Answers Handbook

Javascript onchange with two different dropdowns

Im pretty new with javascript programming.

I have some .php code where 2 drop-down lists (in the same FORM) are populated with two different mysqli queries, this works without problems.

I'm trying to get javascript to handle selected parts of dropdowns, with onchange, this only works for one dropdown, and I can't figure out how to get around this.

This is a code that works with a single drop-down menu, and automatically refreshes the page without sending:

$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 icon in italics, I know, will not catch the correct value, but it is here im right now ...

How can I get the action url with selected values? since this will be used in mysqli query to display data from the actual selection

Thanks in advance...:)

+5
source share
4 answers

You can update your code to the 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(); }
+2
source

You are currently submitting a form via JavaScript. If the selection is inside the form, their values ​​will be automatically sent when the form is submitted. You do not even need to change the action of the form.

So, you can just create a regular form (including a submit button if you want) and it will work. Then add some JavaScript sauce so that it automatically dispatches.

This code below does this. JavaScripts adds a class to the body. This is a way to easily change the style based on the included JavaScript or not. In this case, I use it to hide the submit button, which is only needed in a situation other than JavaScript.

Then I bind a change handler other than yours to submit the form when the value is selected. By providing the correct name , their values ​​will be automatically added as intended.

Notice how event handlers are linked through code. You do not need to hardcode any JavaScript calls into 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>
+3
source

try to do it

 <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 'changeDropDown1' and 'changeDropDown2' to your handler function

+1
source

try it

 <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 is out of function to save time because these 2 vars need to be set only once

+1
source

More articles:


All Articles