Using 1st select box value to trigger/filter the data of 2nd select box from database

Question

So i want to make my select dropdown box flexible, however i tried using AJAX which i found online, but the AJAX request is a standalone data, it does not return back the data.

Is there any convenient way to get the data and able to submit to another PHP file ?

Here is my Code

index.php

<td>
                    <select id="ownerID" name="OwnerID" class="id" required> 
                    <?php 

                    $Employee_ID='';

                    $sql1="SELECT Employee_ID FROM user1 WHERE Position1='QE' OR Position1='OTHER'";
                    $result1=odbc_exec($conn,$sql1);?>
                    <option value="">Choose</option>
                    <?php while($row1=odbc_fetch_array($result1)){
                        $Employee_ID=$row1['Employee_ID'];
                    ?>
                        <option value ="<?php echo $Employee_ID;?>"><?php echo $Employee_ID;?></option>
                    <?php           
                    }
                    ?>
                    </select>
                </td>
                </tr>
                <tr>
                <td id="response" style="margin-left:50px;">
                </td>

AJAX

<script type="text/javascript">
    $(document).ready(function(){
        $("select.id").change(function(){
            $("#response option").remove();
            var selectedOwner = $(".id option:selected").val();
            $.ajax({
                type: "POST",
                url: "process-request.php",
                data: { id : selectedOwner}
            }).done(function(data){
                $("#response").html(data);
            });
        });
    });
</script>

post-requst.php

if(isset($_POST["id"])){
        $id = $_POST["id"];
        
        $Form_Tracking_ID=null;

        $sql="SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 IS NULL AND CEF_ID IS NULL
        UNION SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 IS NULL AND CEF_ID = ' ' 
        UNION SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 = ' ' AND CEF_ID IS NULL
        UNION SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 = ' ' AND CEF_ID = ' '";
        $result=odbc_exec($conn,$sql);
        if($id !== 'Choose'){
        echo "<label>Tool ID:</label>";
        echo "<br><select id='toolid' name='ownerid' required>"; ?>
            <option value="">Choose</option>
        <?php while($row=odbc_fetch_array($result)){
            $search=$row['Form_Tracking_ID']; ?>
            <option value="<?php echo $search ?>"><?php echo $search ?></option>
        <?php  }   
        echo "</select>";

        }      
    }

can you please ellobrate the issue here.1)what is the return value of the ajax call — Aravinth, Apr 07 '21 at 01:40
yes, the ajax get the value from the 1st select box and shows the 2nd dropdown box which is data filter using the value in the 1st select box, but how to get the value from the 2nd select box into my original php page which contains a submit button [this is the example i followed which only just shows the 2nd dropdown box without returning back the value](https://stackoverflow.com/questions/40989208/change-option-value-based-on-other-dropdown-php) — Wee Yaw, Apr 07 '21 at 01:44

score 0 · Answer 1 · answered Apr 07 '21 at 01:42

    You can use a function for get data from database, getting value of 1º select and put them on 2º select
    //Get value from 1 select
    $("#firstSelect").change(function () {
        let firstSelectValue = $("#firstSelect").val();
        $("#secondSelect").text("");
//Calling a function to get value from database
        getDataForSecondSelect(firstSelectId);
      })
    
    
      function getDataForSecondSelect(firstSelectValue) {
        $.ajax({
          url: `getDataForSecondSelect.php?value=${firstSelectValue}`,
          method: "GET",
          dataType: "JSON",
          success: function (message) {
            if (message.length != 0) {
              $('#secondSelect').prop('disabled', false);
              for (let i = 0; i <= message.length; i++) {
                $("#secondSelect").prepend(`<option value=${message[i]["id"]}>${message[i]["name"]}</option>`);
              }
            } else {
              $("#subcategoriaProduto").text("");
              $("#subcategoriaProduto").prepend("<option>There's no data</option>");
              $('#subcategoriaProduto').prop('disabled', true);
            }
    
          }
        });
      }

Should i put this in the original php page or page that we process ajax request ? — Wee Yaw, Apr 07 '21 at 01:49
can u please modify from my codes, as i am a beginner, please help :( — Wee Yaw, Apr 07 '21 at 01:50
Sorry it took me so long to get back to you. Put this in Ajax Request — Leonardo Albuquerque, Apr 09 '21 at 01:21
I'm a beginner too. LOL, but the best thing to do in my opinion is make the PHP file return a JSON as if it were a REST API, it would be better for you to filter for the second select, and then treat everything with JavaScript, I already had to use two select to filter data, but I did like I told you above — Leonardo Albuquerque, Apr 09 '21 at 01:38

Using 1st select box value to trigger/filter the data of 2nd select box from database

1 Answers1