Shades Posted July 21, 2019 Posted July 21, 2019 Hello, from the help of @Magictallguy. THANK YOU!I have finally created two drop down lists which show the make and model of the vehicles from the database. However, know when I choose the make on the first drop down list I want it dynamically to show the second drop down list only specific for the make which has been chosen! However, I seem to be getting this wrong. If someone could help me out here would be appreciated search.php - <!DOCTYPE HTML> <head> <title>Car Search</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#cmMAKE').on('change', function(){ var cmMAKE = $(this).val(); if(cmMAKE){ $.ajax({ type:'POST', url:'searchAjax.php', data:'cmMAKE='+cmMAKE, success:function(html){ $('#cmMAKE').html(html); $('#cmMODEL').html('<option value="">Select make first</option>'); } }); }else{ $('#cmMAKE').html('<option value="">Select make first</option>'); $('#cmMODEL').html('<option value="">Select model first</option>'); } }); </script> </head> <?php error_reporting(E_ALL & ~E_NOTICE); require("config/config.php"); try { $database = new Connection(); $db = $database->openConnection(); $q = $db->prepare("SELECT COUNT(`avail`.`cID`) AS `total`, `make`.`cmMAKE` FROM `cars_available` AS `avail` INNER JOIN `car_makes` AS `make` ON `avail`.`cMAKE` = `make`.`cmID` GROUP BY `avail`.`cMAKE` ORDER BY `total` DESC, `make`.`cmMAKE` ASC"); $q->execute(); $data = $q->fetchAll(); ?> <table width = "50%"> <tr> <th><h3>SEARCH OUR CARS</h3></th> <th><h4>Make:</h4></th> <!-- <form name="searchcars" method="POST" action="searchsubmit.php"> --> <th> <select name="cmMAKE" id="cmMAKE"> <option value="">MAKE</option> <?php foreach ($data as $row): ?> <option><?=$row["cmMAKE"]?> (<?=$row["total"]?>)</option> <?php endforeach ?> </select> </th> <?php $q2 = $db->prepare("SELECT COUNT(`avail`.`cMODEL`) AS `total`, `model`.`cmoMODEL` FROM `cars_available` AS `avail` INNER JOIN `car_models` AS `model` ON `avail`.`cMODEL` = `model`.`cmoID` GROUP BY `avail`.`cMODEL` ORDER BY `total` DESC, `model`.`cmoMODEL` ASC"); $q2->execute(); $data2 = $q2->fetchAll(); ?> <th><h4>Model:</h4></th> <th> <select name="cmoMODEL" id="cmoMODEL"> <option value="">MODEL</option> <?php foreach ($data2 as $row2): ?> <option><?=$row2["cmoMODEL"]?> (<?=$row2["total"]?>)</option> <?php endforeach ?> </select> </th> <th><input type="submit" value="Submit"></th> </form> </tr> <table> <?php $database->closeConnection(); } catch (PDOException $e) { echo "There is some problem in connection: " . $e->getMessage(); } ?> </html> searchAjax.php - <?php error_reporting(E_ALL & ~E_NOTICE); require("config/config.php"); $cmMAKE = $_POST["cmMAKE"]; try { $database = new Connection(); $db = $database->openConnection(); if(!empty($_POST["cmMAKE"])) { // Fetch model data based on the specific make $q2 = $db->prepare("SELECT COUNT(`avail`.`cMODEL`) AS `total`, `model`.`cmoMODEL` FROM `cars_available` AS `avail` INNER JOIN `car_models` AS `model` ON `avail`.`cMODEL` = :cmMAKE GROUP BY `avail`.`cMODEL` ORDER BY `total` DESC, `model`.`cmoMODEL` ASC"); $q2->bindParam(":cmMAKE", $cmMAKE); $q2->execute(); $data2 = $q2->fetchAll(); ?> //$query = "SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC"; //$result = $db->query($query); > // Generate HTML of state options list <?php foreach ($data as $row): ?> <option><?=$data2["cmoMODEL"]?> (<?=$row["total"]?>)</option> <?php endforeach ?> <? } $database->closeConnection(); } catch (PDOException $e) { echo "There is some problem in connection: " . $e->getMessage(); } ?> 1 Quote
Djkanna Posted July 26, 2019 Posted July 26, 2019 It's been an extremely long time since I've used jQuery for anything. The following front end script would work with the desired effect, you'll need to modify it to fit into your code though. https://codepen.io/MrDJK/pen/qeqNQM (There will be a better way of doing it I'm sure of it) 4 Quote
Shades Posted July 28, 2019 Author Posted July 28, 2019 WOW! You legend! You made it look so easy man thanks for that I appreciate that man 2 Quote
Djkanna Posted July 29, 2019 Posted July 29, 2019 On 7/28/2019 at 1:45 AM, Shades said: WOW! You legend! You made it look so easy man thanks for that I appreciate that man No problem, if you genuinely have an issue implementing it into your code shoot me a message I'll try and lend a hand. (I'm not active all the time - but I check in every now and again) 2 Quote
Shades Posted August 16, 2019 Author Posted August 16, 2019 Hey DJKanna, I opened the link again and the dropdown pretty much is not working on my laptop? Quote
Djkanna Posted August 16, 2019 Posted August 16, 2019 51 minutes ago, Shades said: Hey DJKanna, I opened the link again and the dropdown pretty much is not working on my laptop? Works fine for me, anything specific to give (error messages? - Codepen has a console ) Quote
Magictallguy Posted August 17, 2019 Posted August 17, 2019 2 hours ago, Djkanna said: Works fine for me, anything specific to give (error messages? - Codepen has a console ) Confirmed working for me too. Throwing a guess at wrong lib version? 1 Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.