Need to pull database information from checked item via javascript and php

Question

I have a list that is populated from a database array like so:

$i = 0;
foreach ($category_label as $value) {
echo '<input id="'.$category_label[$i].'" type="checkbox" name="q1" value="'.$category_label[$i].'">
<label for="'.$category_label[$i].'">'.$category_label[$i].'</label><br />';
$i++;

As you can see, this builds a list of items with a checkbox by them from the database array. The next step is that if a user selects one of the checkboxes, I need to display a new array of associated items. Here is the javascript and associated <div> that I have started to do this:

JS:

$(function() {
    $('input[name=q1]').on('change', function () {
        var valu = this.value;
            if (this.checked) {
                    $('#q2').append("<li><a href='#'>" + valu + "</a></li>");
                    $('#question2').show();
            } else {
                var lis = $("#q2").find('li');
                lis.each(function () {
                if ($(this).text() === valu) {
                    $(this).remove();
                }
            });

            if (lis.length === 0) {
                $('#question2').hide();
            }
        }
    });
 });

Associated PHP:

<div id="question2" class="question">
<p>Results:</p>
<ul id="q2"></ul>
</div>

Okay, so right now, the var valu = this.value; in the js script is showing the selected item in the question2 div. Rather, I need to get the category id value from the checked item and then pull all the child items that have the associated parent category to fill out the list. How can I modify my php and js to do so?

UPDATE:

This question is getting some feedback that it is too broad. Let me specify the issue a bit further to find a good solution. I have modified the first PHP script to pull the category id from the selected item into the input item as the value. Here is that update:

 echo '<input id="'.$category_label[$i].'" type="checkbox" name="q1" value="'.$category_id[$i].'"><label for="'.$category_label[$i].'">'.$category_label[$i].'</label><br />';

Now, I just need to find a way to pass this value through the javascript and get the array of items that are associated with that category value to display in the output list.

That's too broad to answer here: You need ajax to make a request to the server, sending the value as a parameter and write a php script to process that and send back the results you need. — jeroen, Jun 16 '14 at 13:59
And the idea of a `foreach` loop is that you can use `$value` instead of `$category_label[$i]`. And using the same `name` attribute for all your checkboxes will probably lead to problems, especially in javascript-disabled browsers. — jeroen, Jun 16 '14 at 14:01
I gave an similar answer to this question [here](https://stackoverflow.com/questions/24240044/drop-down-menu-to-display-all-records-from-a-query-into-a-table-ajax-and-php/24240225#24240225) — Ariën van Helden, Jun 16 '14 at 14:01
Which variable in the for loop is the category id value? All I see is category label. — Useless Intern, Jun 16 '14 at 14:20

naota · Answer 1 · 2014-06-16T14:51:23.880

I guess what you would like to do is something like this:

HTML:

<input id="101" type="checkbox" name="q1" value="aaa">
<label for="101">category A</label><br />

<input id="102" type="checkbox" name="q1" value="bbb">
<label for="102">category B</label><br />

<input id="103" type="checkbox" name="q1" value="ccc">
<label for="103">category C</label><br />

<div id="question2" class="question">
    <p>Results:</p>
    <ul id="q2"></ul>
</div>

JavaScript:

$(function () {
    $('input[name=q1]').on('change', function () {

        var valu = $(this).val();

        if ($(this).is(':checked')) {
            $('#q2').append("<li><a href='#'>" + valu + "</a></li>");
            $('#question2').show();
        } else {
            var lis = $("#q2").find('li');
            lis.each(function () {
                if ($(this).text() === valu) {
                    $(this).remove();
                }
            });

            if (lis.length === 0) {
                $('#question2').hide();
            }
        }
    });
});

DEMO : http://jsfiddle.net/2Yz8j/3/

Hope this helps.

thanks for the attention to this question. I am trying to determine how to pull the array of values associated with the category of the selected item through the display. Please see my recent update for full details. — codacopia, Jun 16 '14 at 14:44

Need to pull database information from checked item via javascript and php

1 Answers1