dynamically updating select boxes with php mysql jquery ajax

Question

I am trying to populate an initial customer select box with results from PDO MySql via PHP. Then I would like the second contact select box to update with additional information related to what was chosen in the first box. I can't get the second script to work. I think the problem is in my ajax script because the PHP scripts work fine when ran on there own.

The Primary Script

 <html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#contact").change(function(){
                 var cid = $("#cid").val();
                 $.ajax({
                    type:"post",
                    url:"contact.php",
                    data:"cid="+cid,
                    success: function(data) {
                      $("#contact").html(data);
                    }
                 });
            });
       });
    </script>
 </head>
 <body>

    Campaign :
    <select name="customer" id="customer">
      <option>-Select a Customer-</option>
    <?php 
    include ("function.php");
  include("connect.php");
    $id = $_SESSION['profile']['id']; 
   foreach($db->query("SELECT * FROM customers WHERE pid = '$id'") as $row) {
        echo "<option value=" . $row['id'] . ">" . $row['name'] . "</option>";
}
        ?>
    </select>



    <select name="contact" id="contact">
        <option>-Select a Contact-</option>
    </select>
  </body>
</html>

The Contact script

    include("connect.php");
$cid = $_POST["cid"];
foreach($db->query("SELECT * FROM contact WHERE cid = '$cid'") as $row) {
    echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';

mucio · Accepted Answer · 2014-02-28 00:07:01Z

1

Maybe your second function should start on #customer change

answered Feb 28, 2014 at 0:07

mucio

7,1271 gold badge23 silver badges36 bronze badges

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

Comments

Nedal Eldeen · Accepted Answer · 2014-02-28 00:10:24Z

0

I see you used the contact select in ajax not customer as you described. However the code you wrote, you used the contact selector with change event, But the contact select box contain only one value, How can it change ??

<select name="contact" id="contact">
    <option>-Select a Contact-</option>
</select>

The previous select should has more than option to can change. Or I think you mean the #customer instead contact as following:-

 $("#customer").change(function(){
                 //  your code;
            });

answered Feb 28, 2014 at 0:10

Nedal Eldeen

1692 silver badges7 bronze badges

Comments

Community · Accepted Answer · 2023-11-17 20:33:26Z

0

Why not just encode a JSON response with the ids and names?

foreach($db->query("SELECT * FROM contact WHERE cid = '$cid'") as $row) {
    $arr[] = array("id" => $row['id'], "name" => $row['name']);
}
echo json_encode($arr);

Then in your ajax response, you could do

$(document).ready(function () {
    $("#customer").change(function () {
        var cid = $("#customer").val();
        $.ajax({
            type: "post",
            url: "contact.php",
            data: {cid: cid},
            success: function (data) {
                var options = [];
                $.each(data, function () {
                    options.push('<option value="' + this.id + '">' + this.name + '</option>');
                });
                $("#contact").html(options.join(""));
            }
        });
    });
});

edited Nov 17, 2023 at 20:33

CommunityBot

11 silver badge

answered Feb 28, 2014 at 0:17

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

14 Comments

Richard Kurth Over a year ago

I changed to the scrip you suggested and now I don't even get the <option>-Select a Contact-</option> all I see is a down arrow

Richard Kurth Over a year ago

Disregard what I just said I get nothing in the contact drop-down just the hard coded stuff.

Tomanow Over a year ago

I just noticed something else wrong with your code. I will update answer

Tomanow Over a year ago

Open your browser network tab in developer tools and tell me what the json response looks like when you change one of the dropdowns

Richard Kurth Over a year ago

contact.php /notaryaccounting POST 200 OK text/html jquery-1.11.0.js:9666 Script 379 B 4 B 19 ms 19 ms

|

Collectives™ on Stack Overflow

dynamically updating select boxes with php mysql jquery ajax

3 Answers 3

Comments

Comments

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related