Jump to content

Populate Dropdown on the basis of another dropdown value in PHP using JQuery Ajax

davidd

By davidd
in PHP Coding Help

 Share

Recommended Posts

davidd Newbie

davidd

Posted
Posted (edited)

I have a form with dropdown list that is populated with values from Sql Server table. Now i would like to use this selected item in SQL query. The results of this query should be shown in label or text field. So when a user selects item from dropdown menu, results from SQL query are shown at the same time.

I have two dropdown list at the moment in my form. First one gets all values from a column in table in SQL Server. And the second one should get a value from the same table based on a selection in first dropdown list.

When i load ajax.php i get 2 error mesages: 
Notice: Undefined index: machinery in C:\wamp64\www\gecko\ajaxfile.php on line  *8*
Warning: sqlsrv_fetch_array() expects parameter 1 to be resource, boolean given in C:\wamp64\www\site\ajaxfile.php on line  *16*

This is my code so far. I have tried to do it with this Ajax script. But i can only get first dropdown to work. The second dropdown(sub_machinery) does not show values, when first dropdown item is selected. The second dropdown should show values from databse table with this query( *$machineryID*  is first dropdown selected item): SELECT MachineID FROM T013 WHERE Machinery=".$machineryID.

Index.php 

    <!doctype html>
      <?PHP
    $server = "server";
    $options = array(  "UID" => "user",  "PWD" => "pass",  "Database" => 
    "database");
    $conn2 = sqlsrv_connect($server, $options);
    if ($conn2 === false) die("<pre>".print_r(sqlsrv_errors(), true));
    echo " ";
    ?>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
                <section id="formaT2" class="formaT2 formContent">
                <div class="row">
                    <div class="col-md-2 col-3 row-color remove-mob"></div>
                    <div class="col-md-5 col-9 bg-img" style="padding-left: 0; 
    padding-right: 0;">
                        <h1>Form</h1>
                        <div class="rest-text">
                           <div class="contactFrm">
                              <p class="statusMsg <?php echo 
    !empty($msgClass)?$msgClass:''; ?>"><?php echo $statusMsg; ?></p>
                               
                                <form action="connection.php" method="post">
                                    <div>machinery</div>     
    <select id="machinery">
       <option value="0">--Please Select Machinery--</option>
       <?php 
       // Fetch Department
       $sql = "SELECT Machinery FROM T013";
       $machanery_data = sqlsrv_query($conn2,$sql);
       while($row = sqlsrv_fetch_array($machanery_data) ){
          $id = $row['Id'];
          $machinery = $row['Machinery'];
          
          // Option
          echo "<option value='".$id."' >".$machinery."</option>";
       }
       ?>
    </select>
    <div class="clear"></div>
                                    <div>Sub Machinery</div>
    <select id="sub_machinery">
       <option value="0">- Select -</option>
    </select>
                                    
                                    <input type="submit" name="submit" 
    id="submit" class="strelka-send" value="Insert">
                                    <div class="clear"> </div>
                                </form>
                             </div> 
                         </div>
                    </div>
                </div> 
            </section>
             </script>
          <script type="text/javascript">
          $(document).ready(function(){

        $("#machinery").change(function(){
            var machinery_id = $(this).val();
    
            $.ajax({
                url:'ajaxfile.php',
                type: 'post',
                data: {machinery:machinery_id},
                dataType: 'json',
                success:function(response){
    
                    var len = response.length;
     
                    $("#sub_machinery").empty();
                    for( var i = 0; i<len; i++){
                        var machinery_id = response[i]['machinery_id'];
                        var machinery = response[i]['machinery'];
                        
                        $("#sub_machinery").append("<option 
    value='"+machinery_id+"'>"+machinery+"</option>");
    
                    }
                }
            });
        });
    
    });
          </script>
    </body>
    </html>

Ajaxfile.php 

<?php
    $server = "server";
    $options = array(  "UID" => "user",  "PWD" => "pass",  
    "Database" => "database");
    $conn2 = sqlsrv_connect($server, $options);
    if ($conn2 === false) die("<pre>".print_r(sqlsrv_errors(), true));
    echo " ";

    $machineryID = $_POST['machinery'];   // department id

    $sql = "SELECT MachineID FROM T013 WHERE Machinery=".$machineryID;
    
    $result = sqlsrv_query($conn2,$sql);
    
    $machinery_arr = array();
    
    while( $row = sqlsrv_fetch_array($result) ){
        $machinery_id = $row['ID'];
        $machinery = $row['MachineID'];
    
        $machinery_arr[] = array("ID" => $machinery_id, "MachineID" => 
    $machinery);
    }
    
    // encoding array to json format
    echo json_encode($machinery_arr);
    ?>
Edited by davidd
davidd Newbie

davidd

Posted
  • Author
Posted
Quote
4 minutes ago, ginerjm said:

This line: 



   $machinery_id = $row['ID'];

is not going to work for you.  You don't have an ID in this query's results.

This was a typo in my code. I have added ID to query, but this does not fix my problem.

 

ginerjm Prolific Member

ginerjm

Posted
Posted

So what does your script get back from the ajax call? Anything?   If not, add some output to the ajax script and display it in the main script when it returns so you can debug the ajax script.

davidd Newbie

davidd

Posted
  • Author
Posted
10 minutes ago, ginerjm said:

So what does your script get back from the ajax call? Anything?   If not, add some output to the ajax script and display it in the main script when it returns so you can debug the ajax script.

If i Inspect element(first dropdown) in Google chrome, and go to network tab, i can see that when i choose some item in first dropdown it fires ajaxfile.php. But there is also an error: 

Warning: sqlsrv_fetch_array() expects parameter 1 to be resource, boolean given in C:\wamp64\www\site\ajaxfile.php on line 16

Which is this line: 

Line 16 -->while( $row = sqlsrv_fetch_array($result) ){
                 $machinery_id = $row['ID'];
                 $machinery = $row['MachineID'];

                 $machinery_arr[] = array("ID" => $machinery_id, "MachineID" => $machinery);
               }

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.