Passing multiple checkbox items to PHP file using JSON and querying a DB

Question

I'm trying to pass multiple checkboxes with different values to a PHP script that will run a search against my database for the values that are selected.

The HTML form is as follows:

                <li><input type="checkbox" class="keywords"  value="option1" title="option1" /></li>
                <li><input type="checkbox" class="keywords"  value="option2" title="option2" /></li>
                <li><input type="checkbox" class="keywords"  value="option3" title="option3" /></li>
                <li><input type="checkbox" class="keywords"  value="option4" title="option4" /></li>
                <li><input type="submit" name="submit" class="search" /></li>

The javascript code to pass this to my PHP file is:

        <script type="text/javascript">
    $(document).ready(function(){
        $(".search").click(function()
        {           
        $.post("parser.php", 
                    { 
                        keywords: $(".keywords:checked").val() 
                    }, 
                   function(data)
                   {        
                        $.each(data, function()
                        {   
                            $("div#result").append("<li class='arrow'><a href='parser.php?id=" + this.id + "'>" + this.title + "</a></li>");
                        });

                        $("div#jsonContent").show();

                    }, 
            "json");

        });

    });
    </script>

In parser.php I then take the incoming keyword, and search the database:

$keywords = mysql_real_escape_string ($_GET["keywords"]);
$query = mysql_query("SELECT * FROM keyworddb WHERE keywords LIKE '%". $keywords ."%' ");
$arr = array();
while( $row = mysql_fetch_array ( $query ) )
{
$arr[] = array( "id" => $row["id"], "title" => $row["title"] );
}
echo json_encode($arr);

This is all great, it runs through without any errors except:

1) In firebug it's sending over the selected checkbox value, though not the multiple checkboxes. It only uses the first checkbox value if multiple checkboxes selected.

2) Despite that it returns all entries to the table :( no matter what is selected.

Any help appreciated.

Update:

I've made the chanegs suggested:

            <form id="findkeywords">
            <ul>
                <li><input type="checkbox" class="keywords[]"  value="option1" title="option 1" /></li>
                <li><input type="checkbox" class="keywords[]"  value="option2" title="option 2" /></li>
                <li><input type="checkbox" class="keywords[]"  value="option3" title="option 3" /></li>
                <li><input type="checkbox" class="keywords[]"  value="option4" title="option 4" /></li>
                <li><input type="submit" name="submit" class="search" /></li>
            </ul>
            </form>

The Javascript has been changed to:

        $(document).ready(function(){
        $(".search").click(function()
        {            
        $.post("parser.php", 
                       { 
                           keywords: $("form#findkeywords").serialize() 
                       }, 
                   function(data)
                   {        
                        $.each(data, function()
                        {    
                            $("div#result").append("<li class='arrow'><a href='parser.php?id=" + this.id + "'>" + this.title + "</a></li>");
                        });

                        $("div#jsonContent").show();

                    }, 
            "json");

        });

    });

I haven't made any additional changes to the php file yet as I just want to make sure this is actually sending the data across. But in FireBug it doesn't appear to be sending anything at all.

jondavidjohn · Accepted Answer · 2011-02-05 00:42:57Z

2

The problem using .val() the way you are is it is passing an array to the data, to do that you would have to use a JSON library to 'stringify' it to send to your php. If you use .serialize() there would be no need to try and parse it on the other side, it will have the data emulate regular serialized form data.

Personally, I would name your checkbox group as an array, and the just serialize the checkboxes as a form.

Form:

<form id="checkboxes">
    <li><input type="checkbox" name="keywords[]"  value="option1" title="option1" /></li>
    <li><input type="checkbox" name="keywords[]"  value="option2" title="option2" /></li>
    <li><input type="checkbox" name="keywords[]"  value="option3" title="option3" /></li>
    <li><input type="checkbox" name="keywords[]"  value="option4" title="option4" /></li>
    <li><input type="submit" name="submit" class="search" /></li>
</form>

JS:

<script type="text/javascript">
$(document).ready(function(){
    $(".search").click(function()
    {           
        $.post("parser.php", $("form#checkboxes").serialize(), 
        function(data)
        {        
            $.each(data, function()
            {   
                $("div#result").append("<li class='arrow'><a href='parser.php?id=" + this.id + "'>" + this.title + "</a></li>");
            });
            $("div#jsonContent").show();
        });
    });
});
</script>

You will then need to treat $_POST['keywords'] as an Array

You can access them with a simple foreach

foreach($_POST['keywords'] as $keyword) {
    echo $keyword;
}

edited Feb 5, 2011 at 0:42

answered Feb 2, 2011 at 23:09

jondavidjohn

62.5k21 gold badges120 silver badges159 bronze badges

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

13 Comments

user601606 Over a year ago

Thanks for replying! I'm just learning jQuery/JSON so bare with me. I've made changes to the code and run it. I'm watching how the script is running in Firebug and there doesn't appear to be anything posted from the script. I would've expected something like: keywords[]=option1&keywords[]option2&keywords[]=option3 or something similar?

jondavidjohn Over a year ago

Well without seeing the changes you made I can't help, I would say make sure you are wraping your checkboxes in a unique form, and you are serializing the form, not the checkboxes.

user601606 Over a year ago

I'll answer in a full question with changes :)

jondavidjohn Over a year ago

also, your checkboxes do not have "names", they need to have name="keywords[]" not class

user601606 Over a year ago

Doh, I see what I did there... just have to figure out how to explode json encoded arrays and use it against my database search.

|

Collectives™ on Stack Overflow

Passing multiple checkbox items to PHP file using JSON and querying a DB

Update:

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update:

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related