Jump to content

Recommended Posts

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();
}
?>
	

  • Like 1

Share this post


Link to post
Share on other sites

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)

  • Like 4

Share this post


Link to post
Share on other sites

WOW! You legend! You made it look so easy man thanks for that I appreciate that man 

  • Like 2

Share this post


Link to post
Share on other sites
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)

  • Like 2

Share this post


Link to post
Share on other sites
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 )

Share this post


Link to post
Share on other sites
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?

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...