JQuery PHP AJAX filter based on multiple checkbox array

Question

I'm hoping someone can point me in the right direction. I'm primarily a PHP developer but I'm really trying to get my head around jquery and javascript more due to the increasing number of AJAX work requests we receive.

Basically I have a sidebar filter that works fine. It is based on 3 things. A group, category and sub category. So for example, Boots as the category, Leather (type) as a sub category and Black (colour) as tertiary filter. At the moment it works based on a GET form. However I want to use live filters instead so as they click a checkbox, it updates the results based on a query. I can write all the PHP for this but I'm struggling to get the data together by jQuery. I've looked at using jQuery .each and .change.

There are 3 groups of checkboxes and they are all based on arrays. So for example again: category[], subcategory[], tertiary[].

Thanks in advance for the help.

Some example HTML

<input id="$ProdCatLabel" class="side_filter_checkbox" name="ProdCatFil[]" type="checkbox" value="$ProdCat">
<input id="$ProdSubCatLabel" class="side_filter_checkbox" name="ProdSubCatFil[]" type="checkbox" value="$ProdSubCat">
<input id="$BrandingLabel" class="side_filter_checkbox" name="BrandFil[]" type="checkbox" value="$Branding">

My attempts:

var prodcats = $('side_filter_prodcats[name="ProdCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

var prodsubcats = $('side_filter_prodsubcats[name="ProdSubCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

$.ajax({
    type: "POST",
    url: "[ENTER PHP URL HERE]",   
    data: "ProdCats=" + prodcats + "ProdSubCats=" + prodsubcats,                                        
    success: function(msg) { $(".content_area").html(msg); }
});

Am I barking up the right tree here?

Steve O · Accepted Answer · 2012-12-07 14:22:29Z

2

Ok let's say your checkboxes have the classes category, subcategory and tertiary. You could attach a click event handler to each group that calls the function to load in the correct data, passing the checkbox value and a class or data-attribute to the function as parameters.

// Your main DOM ready function
$(document).ready(function() {

    // Checkboxes click function
    $('input[type="checkbox"]').on('click',function(){
        // Here we check which boxes in the same group have been selected
        // Get the current group from the class
        var group = $(this).attr("class");
        var checked = [];

        // Loop through the checked checkboxes in the same group
        // and add their values to an array
        $('input[type="checkbox"].' + group + ':checked').each(function(){
            checked.push($(this).val());
        });

        refreshData(checked, group);
    });

    function refreshData($values, $group){
        // Your $values variable is the array of checkbox values
        // ie. "boot", "shoe" etc
        // Your $group variable is the checkbox group
        // ie. "category" or "subcategory" etc.
        // Now we can perform an ajax call to post these variable to your php
        // script and display the returned data

        $.post("/path/to/data.php", { cats: $values, type: $group }, function(data){
            // Maybe output the returned data to a div
            $('div#result').html(data);
        });
    }

});

Here's an example of the checkbox click function in action: http://jsfiddle.net/F29Mv/1/

answered Dec 7, 2012 at 14:22

Steve O

5,8542 gold badges27 silver badges27 bronze badges

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

6 Comments

30secondstosam Over a year ago

Thanks for your answer - i'll give it a go and report back

30secondstosam Over a year ago

also - why use $.post rather than $.ajax ? is there a difference?

Steve O Over a year ago

Theres a couple of differences, essentially $.post is just a shorthand ajax POST function. I tend to prefer to use the $.ajax function as you can define the method (GET, POST) and there's a few more paramenters. Check it out: api.jquery.com/jQuery.ajax

30secondstosam Over a year ago

hi - in my PHP file i'm simply just taking the get (i changed it to get rather than post) and doing this: echo $Values = $_GET['cats']; echo $Groups = $_GET['type']; this is not working and it is somehow killing the page - however i put the alert box into it and it does show me the values...

Steve O Over a year ago

Hi, you don't need to keep the variable names the same. You can return whatever data you like by simply echoing out the result of the query in PHP. If you simply do echo "hello world; in your php file it will return hello world as data to your $.ajax function.

|

Collectives™ on Stack Overflow

JQuery PHP AJAX filter based on multiple checkbox array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related