create 3 dependent dropdown list using php ajax mysql

Question

i am using PHP MYSQL and JAVASCRIP AJAX.

i have multiple dropdown list that i want to make it dependent on each other using AJAX where these dropdown list includes data retrieved from MYSQL database.

the user select from the first dropdown list and based on its selection the second and third dropdown list display the related values.

what i have done until now is to make the second dropdown list depend on the first one.

debug MODE:

first pic shows the first AJAX call Second pic shows the second AJAX call

i need now to make the second and third be depend on the first one.

tables

site_info:
- siteID
- siteNAME
- ownerID
- companyID
owner_info:
- ownerID
- ownerNAME
company_info:
- companyID
- companyNAME

i know the error is in the for each loop

foreach($query_site_name as $row)
                      {
            //           $site_name = (array)$site_name;
                       echo "<option value = '".$row ->ownerID."', '".$row ->companyID."'>".$row->siteNAME."</option>";
                      }

how to embed 3 values in the option tag??

code1:

<form method ="post" action ="" name="submit_form">
    <table border="0" width="30%">
        <tr>
           <td>Site Name</td>
           <td>Owner Name</td>
           <td>Company Name</td>
           <td>Subcontractor Name</td>
         </tr>
         <tr>
           <td><select id="site_name"  name = "site_name">

             <?php


                 $query_site_name =$wpdb->get_results("select DISTINCT siteNAME, ownerID, companyID  from site_info");
                  foreach($query_site_name as $row)
                  {
        //           $site_name = (array)$site_name;
                   echo "<option value = '".$row ->ownerID."', '".$row ->companyID."'>".$row->siteNAME."</option>";
                  } 

             ?>

            <!--create  dropdown list owner names-->
            </select></td>

            <td><select id="owner_name"  name ="owner_name">
            <option value="">Select Owner</option>        
            </select></td>

            <!--create  dropdown list Company names-->


            <td><select id="Company_name"  name ="Company_name">
             <option value="">Select Company</option>       




     <script type="text/javascript">

// make Dropdownlist depend on each other
$(document).ready(function(){
// depend owner name on site name   
    $('#site_name').change(function(){
         var ownerID = $(this).val();
         $.ajax({
            url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
            method:"POST",
            data:{ownerID:ownerID},
            datatype:"text",
            success:function(data){
                $('#owner_name').html(data);
            }

         });

//depend company name on site name 
         var companyID = $(this).val();
         $.ajax({
            url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
            method:"POST",
            data:{companyID:companyID},
            datatype:"text",
            success:function(data){
                $('#Company_name').html(data);
            }

         });


      });

  });

</script>

where this AJAX script is used to work between the first and second dropdown list only

dropdown_fetch_owner.php:

<?php
 include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');
 global $wpdb;
$outputOwner = '';
$sql =$wpdb->get_results("select ownerID, ownerNAME from owner_info where ownerID = '".$_POST['ownerID']."' ORDER BY ownerNAME");
var_dump($sql);

$outputOwner= '<option value="">Select Owner</option>';
foreach($sql as $row){


    $outputOwner.= "<option value = '".$row ->ownerID."'>".$row->ownerNAME."</option>";
}
echo $outputOwner;


$outputCompany = '';
$sql =$wpdb->get_results("select companyID, companyNAME from company_info where companyID = '".$_POST['companyID']."' ORDER BY companyNAME");
var_dump($sql);

$outputCompany= '<option value="">Select Company</option>';
foreach($sql as $row){

    $outputCompany.= "<option value = '".$row ->companyID."'>".$row->companyNAME."</option>";
}
echo $outputCompany;

?>

thanks for advance

read this article : codexworld.com/…

Hiren Makwana
– Hiren Makwana

2017-03-21 07:55:22 +00:00
Commented Mar 21, 2017 at 7:55 — Hiren Makwana
– Hiren Makwana, Commented Mar 21, 2017 at 7:55

dtanwar · Accepted Answer · 2017-03-20 10:06:25Z

1

Error with your ajax code in javascript try this

$(document).ready(function(){

$('#site_name').change(function(){

     var  arrayID    = $(this).val().split(",");
     var  ownerID    = arrayID[0];
     var  companyID  = arrayID[1];

     if(ownerID != "" && companyID != ""){

             $.ajax({
                url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
                method:"POST",
                data:{ownerID:ownerID},
                datatype:"text",
                success:function(data){
                    $('#owner_name').html(data);
                }

             });

             //depend company name on site name 
             $.ajax({
                url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
                method:"POST",
                data:{companyID:companyID},
                datatype:"text",
                success:function(data){
                    $('#Company_name').html(data);
                }

             });
    }


  });

});

answered Mar 20, 2017 at 10:06

dtanwar

689 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Amin 3amin Over a year ago

i tried your answer did not work . i think the problem is in the php in first select inside the for each loop in the option tag

dtanwar Over a year ago

if there is any error with your select query then there must be no option inside first dropdown.

Amin 3amin Over a year ago

the first dropdown work perfect and i have data inside it also when i choose from the first dropdown the second display the related data. My Problem is concerning the third dropdown where also this third one must display the related data once the user choose from the first dropdown. my question is how can i include in the option value tagbeside .$row ->ownerID. this variable .$row ->companyID. i edit my question and add 2 picture to explain what is happen

dtanwar Over a year ago

check my solution on top most answer hope this will help you :)

dtanwar · Accepted Answer · 2017-03-21 09:15:33Z

0

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <form method ="post" action ="" name="submit_form">
    <table border="0" width="30%">
        <tr>
           <td>Site Name</td>
           <td>Owner Name</td>
           <td>Company Name</td>
           <td>Subcontractor Name</td>
         </tr>
         <tr>
           <td><select id="site_name"  name = "site_name">
            <option value="">selet</option>
          <option value="1,2">www.google.com</option>
            <!--create  dropdown list owner names-->
            </select></td>

            <td><select id="owner_name"  name ="owner_name">
            </select></td>

            <!--create  dropdown list Company names-->


            <td><select id="Company_name"  name ="Company_name">

         </select>
         </td>
         </tr>
         </table>
      </form>      


</body>
</html>
<script type="text/javascript">

     $('#site_name').change(function(){
            var arrayId =   $(this).val().split(",");
        if(arrayId != ""){
            var ownerID   = arrayId[0];
            var companyID = arrayId[1];
              $.ajax({
                    url:"echo.php",
                    method:"POST",
                    data:{ownerID:ownerID},
                    datatype:"text",
                    success:function(data){
                        $('#owner_name').html(data);
                    }

                 });

                  //depend company name on site name 
                 $.ajax({
                    url:"echo.php",
                    method:"POST",
                    data:{companyID:companyID},
                    datatype:"text",
                    success:function(data){
                        $('#Company_name').html(data);
                    }

                 });
        }


      });
</script>  //ajax code in php <?php

if(isset($_POST['ownerID']))
{
$ownerID = $_POST['ownerID'];
$outputOwner = '';
$outputOwner .= '<option value="">Select Owner</option>';
$outputOwner .= '<option value="'.$ownerID.'">Test Owner</option>';
echo $outputOwner;
}
if(isset($_POST['companyID']))
{

$companyID = $_POST['companyID'];
$outputCompany = '';
$outputCompany .= '<option value="">Select Company</option>';
$outputCompany.= '<option value="'.$companyID.'">Test Comapny</option>';
echo $outputCompany;
}
 ?>

answered Mar 21, 2017 at 9:15

dtanwar

689 bronze badges

3 Comments

Amin 3amin Over a year ago

this answer did not work also i got the result of the owner name droplist but in the company name i got nothing

dtanwar Over a year ago

this is working code all you need to do is modify echo.php file according to your query

Amin 3amin Over a year ago

in the debug mode it shows that the parameters are correct but on the webpage the third dropdown list doesn't display anything

Collectives™ on Stack Overflow

create 3 dependent dropdown list using php ajax mysql

code1:

dropdown_fetch_owner.php:

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

code1:

dropdown_fetch_owner.php:

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related