populate second dropdown on onchange event

Question

I have 3 dropdowns in my php/html page (I am using jooomla 3x and jumi to get the script files into my article) form is getting populated from MySQL database table.

Action property in form is sending the form to second page with thank you message and sending emails to admin and users (again using jumi to achieve this). May be in can change this logic - if there is no other way (which will be long job). So, currently i cannot use self action event property of the form.

I managed to populate first dropdown from MySQL Database table successfully (code below).

I also managed to get the first dropdown selected value in div in html using jquery - but, How to cascade the same logic upon onchange event fired by first dropdown? without refreshing the whole page and loosing all the previous form selections?

Here is my Code

      <script type="text/javascript"> window.onload = function(){
            document.getElementById('make').addEventListener('change',function(){
                var $strmake = document.getElementById("make").value;
                //alert($strmake);
                document.getElementById("div1").innerHTML = $strmake;
            });
        }

My First Drop Down working fine

                <select name="make" id="make" style="font-size:1.3em;padding:5;height:40px;">
            <option selected>Select Make</option>
            <?php
                // credentials
                $host_name  = xxx
                $database   = xxx
                $user_name  = xxx
                $password = xxx


                $connect = mysqli_connect($host_name, $user_name, $password, $database) or die("Error " . mysqli_error($connect));
                if (mysqli_connect_errno())
                {
                    echo "Failed to connect to MySQL: " . mysqli_connect_error();
                }
                else {
                    echo "Connected to MySQL<br>";
                }

                //execute the SQL query and return records
                $query = "SELECT distinct make FROM VehicleModelYear ORDER BY make";

                $result = mysqli_query($connect, $query); 

                //fetch tha data from the database 
                while($row = mysqli_fetch_array($result)) { 
                  echo "<option value='" . $row['make'] . "'>" . $row['make'] . "</option>"; 
                } 
            ?>
            </select>

Second drop down code

                <SELECT name="model" class="" id="model" style="font-size:1.3em;padding:5;height:40px;">
            <OPTION selected>Select Model</OPTION>
            <?php

                $connect = mysqli_connect($host_name, $user_name, $password, $database) or die("Error " . mysqli_error($connect));
                if (mysqli_connect_errno())
                {
                    echo "Failed to connect to MySQL: " . mysqli_connect_error();
                }
                else {
                    echo "Connected to MySQL<br>";
                }

                $selected = explode(',', $_POST['make']);
                $s_id = $selected[0];
                $s_name = $selected[1];

                //execute the SQL query and return records
                $query = "SELECT distinct model FROM VehicleModelYear where ????? ORDER BY model";

                $result = mysqli_query($connect, $quer2); 

                //fetch tha data from the database 
                while($row = mysqli_fetch_array($result)) { 
                  echo "<option value='" . $row['model'] . "'>" . $row['model'] . "</option>"; 
                } 
            ?>
            </SELECT>

Hopefully I will achieve the third on if I have the solution for the second one?

Thanks in advance...

Answer 1

hi i don't know jquery but i'll use simple javascript with ajax first let's create our ajax call

<script type="text/javascript">
    function getMake(make){
 var data = new XMLHttpRequest();
data.open("POST","make.php");

data.onreadystatechange = function(){
  if(data.readyState === 4 && data.status === 200){
    document.getElementById('model').innerHTML = data.responseText;

  }
}
data.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data.send('make='+make);
}
</script>

create model.php file

<?php

            $connect = mysqli_connect($host_name, $user_name, $password, $database) or die("Error " . mysqli_error($connect));
            if (mysqli_connect_errno())
            {
                echo "Failed to connect to MySQL: " . mysqli_connect_error();
            }
            else {
                echo "Connected to MySQL<br>";
            }
            $make = $_POST['make']
            $selected = explode(',', $make);
            $s_id = $selected[0];
            $s_name = $selected[1];

            //execute the SQL query and return records
            $query = "SELECT distinct model FROM VehicleModelYear where ????? ORDER BY model";

            $result = mysqli_query($connect, $quer2); 

            function createDropDown($result){
            echo '<OPTION selected>Select Model</OPTION>';
            //fetch tha data from the database 
            while($row = mysqli_fetch_array($result)) { 
              echo "<option value='" . $row['model'] . "'>" . $row['model'] . "</option>"; 
            } 
            }
           createDropDown($result); //calling the function
        ?>

then in your first dropdwon do the following

<select name="make" id="make" style="font-size:1.3em;padding:5;height:40px;" onchange="getMake(this.value)">

change your second dropdown to this

<SELECT name="model" class="" id="model" style="font-size:1.3em;padding:5;height:40px;"></SELECT>