get data from ajax call

I have a selectbox where i can choose my clients and each client could have 1 or more sites, so when you change your client selection the sites selectbox should also change, but teh main problem is that i can't fill the sites selectbox with options.

I thought it should be the best way to return an array or something.

回答1:

I took a little bit of time but wrote something that might work and simple. Also if you're using AJAX you really don't need to have form tags. You can create form with dives and use a JQuery function to fire AJAX to send data to the database.

Main PHP to populate your first drop down.

<?php
  include_once("../Services/Mysql.php");
  $result = $conn->query("SELECT klant_firmanaam, id From connectprolivedesk.klanten where reseller_klantnr = '5375' order by klant_firmanaam");
?>

<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="form-group">
        <select name="klantenDropDown" id="klantenDropDown" class="form-control">
            <option value="" selected hidden disabled>Select Klant</option>
                <?php
                    if($result->num_rows > 0){
                        while($row = $result -> fetch_assoc()){
                            echo "<option value=".$row["id"]." >".$row["klant_firmanaam"]."</option>";
                        }
                    }
                ?>
        </select>
    </div>
        <div class="form-group">
            <select name="SiteDropDown" id="SiteDropDown" class="form-control" >
            <option value="" selected disabled hidden>Select Site</option>
            </select>
        </div>
 </div>
</body>

This PHP will receive the AJAX post variable and echo out the options which will populate the second drop down.

include_once("../Services/Mysql.php");

$result = $conn->prepare("SELECT site_naam FROM connectprolivedesk.sites WHERE klant_id = ?");
$result -> bind_param("s",$_POST["klantId"]);
$result -> execute();

while($row = $result -> fetchAll()){
   echo "<option value=".$row['sId'].">".$row['site_name']."</option>:
}

This code is for your AJAX which will send the your set kalntId to the above second PHP onChange of your first drop down. The ajax will send the selected clients ID to the PHP so you can sort out the sites only for that client. Then will capture the echoed output and insert those as option in to the second drop down.

<script>
    $(document).ready(function(){
        $('#klantenDropDown').on('change', function(){
            $.ajax({
                url: 'getSites.php',
                type: 'post', //You can use get or post
                data: {
                    'klantId':$(this).val()
                },
           dataType:'text',
           complete:function(data){
            if(data){
                    $('#SiteDropDown').html(data.responseText);
                }
            }
        }
    }
</script>

Hope this helps you or any other.

P.S: I'm not a big mysqli_* user if there's any errors in my code please let know. Also I used prepared statement where the second PHP binds the value which is much safer and prevents SQL injection.

回答2:

Try adding something like this to your ajax success:

var dropdown = document.getElementById('SiteDropDown');
options.forEach(function(element))
{
    dropdown.options[dropdown.options.length] = new Option(element, '', false, false);
});

Essentially creating an array with the information you want to be displayed, is a good idea. But you should try to also work with a value on the select. So when you select an an option the system will know it's id. -> dropdown.options[dropdown.options.length] = new Option(element, 'ID of Array Element', false, false);