Dynamically created checkboxes using ajax from sql result set

Question

I am looking to use ajax to dynamically create checkboxes each time you change your selection from a <select> tag, see the below screenshot for a section of the form that is relevant:

NOTE: The checkboxes under "Queues" should be dynamic.

At the moment, when you change the value for Team it grabs the team name (in this case "Test"), then using ajax (POST) it returns the Manager name for that team.

What I want it to do is look up another table that has a list of the "queues" associated with each team; I am going to add an "onchange" attribute in the tags for the "Manager Name" field.

Below is the code I'm currently using to accomplish the Team => Manager Name dynamic filling:

<script>
        window.onload = function() {
            getManager($("#team").val());       
        }

        function getManager(team) {
            $.ajax({
                type: "POST",
                url: "getManager.php",
                data: {team:team}
            }).done(function( manager ) {
                $("#manager_name").val(manager);
            });
        }
</script>

And here is the getManager.php file that it uses:

<?php

require("../../database/db.php");

$mysqli = new db("nab_reporting");

if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}

$team=$mysqli->real_escape_string($_POST['team']);

$result = $mysqli->query("SELECT manager_name FROM team WHERE teamname = '".$team."'");

$row = $result->fetch_assoc();

echo $row['manager_name'];

mysqli_close($mysqli);

?>

Keeping in mind that the above works; I now need a way to use the onchange attribute of the Manager Name field that will use ajax (similar to above), passing another php page the value that is currently in the field (in this case Kane Charles) and will return a result set (array or JSON maybe?) containing a list of all queues in the database that match up with that Team name.

Below is the html code for each of the different bits:

TEAM

<select name="team" id="team" required="required" onchange="getManager(this.value)">
               <?php 
                    include(__DIR__ . "/../../database/db.php");
                    $db = new db("nab_reporting");
                    $result = $db->query("SELECT teamname FROM team");
                    while ($row = $result->fetch_assoc()) {
                        echo "
                        <option value=\"" . $row['teamname'] . "\">" . $row['teamname'] . "</option>
                        ";
                    }
                    $db->close();
                 ?>
</select>

MANAGER NAME

<input type="text" name="manager_name" id="manager_name" required="required" onchange="getQueues(this.value)">

QUEUES

<label>
    Queues
</label>
<div id="queue_options">
    <!-- queues dynamically created here -->
</div>

I need the contents of queue-options to be erased and reset to only the queues associated with the current team; I haven't done a great deal with ajax, hence why I'm posting on here.

My bad, I meant <select> I will edit my answer accordingly. Do you have any ideas? — Kane Charles
– Kane Charles, Commented Jul 22, 2013 at 5:32
Well I looked over your question and from what I see. You want to get the queues through ajax, but you removed the code that fetches the queues from your question. — John
– John, Commented Jul 22, 2013 at 5:39
I haven't written it yet @John, that's what I'm not sure of. See when it grabs the manager name, it is only returning one result; I need it to return a set of results (array or JSON I'd say) containing a list of all the queues for that team. That's what I'm not sure on how to do — Kane Charles
– Kane Charles, Commented Jul 22, 2013 at 5:41

John · Accepted Answer · 2013-07-22 06:00:34Z

This revision should match what you are asking about

PHP

// make an array to hold the queues
$data = Array();

// Fetch the rows of all the queues
$res = $mysqli->query("SELECT * FROM the_queue_table WHERE manager='" . $_GET["manager"] . "'");

// loop through all the rows and push the queues into the data array
while(($row = mysql_fetch_object($res)) !== false)
{
    array_push($data, $row->queue);
}

// return the data array as a json object
echo json_encode($data);

JavaScript

// get the page and send the manager name to filter with
$.get("file.php?manager=" + managerName, function(page)
{
    // parse the json into an object
    var data = $.parseJSON(page);

    // remove existing checkboxes
    $("#queue_options").children().remove();

    // add checkboxes to the div
    for (var item in data){
        $("#queue_options").append("<input type=\"checkbox\" value=\"" + item + "\" />" + item + "<br />");
    }
});

Collectives™ on Stack Overflow

Dynamically created checkboxes using ajax from sql result set

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related