Question

I am working on a filter functionality using ajax/jquery and php/mysql.I have two sets of check boxes 1)=>for Regions 2)=>for Localities.The filter is similar to the one here. I want to send the values of both the check boxes to filter the records.The filter for localities will be locally filtered on the selection of a region check box.I have got it to work upto some extent
This is called on the first set of check boxes.

Html

<div class="locality">
                <input type="checkbox" id="checkbox1" class="checkbox1" value="<?php echo $suburb['suburb_name']?>" name="Suburb_check[]" onClick="changeResults();" onChange="" ><?php echo $suburb['suburb_name']?>  <span class="grey">(<?php echo $suburb['total']?>)</span>
            </div>
            <?php }?>

Javascript/Jquery

function changeResults(){
    var data = { 'venue[]' : []};
        $("input:checked").each(function() {
            var chck1 = $(this).val();
            //alert(chck1);

                data['venue[]'].push($(this).val());

        });

    $.ajax({
     type : 'POST',
     url : 'process.php',
     data : data,
     success : function(data){


          $('#project_section').html(data); // replace the contents coming from php file

            }  
        });

   $.ajax({
     type : 'POST',
     url : 'loadLocality.php',
     data : data,

     success : function(data){
     document.getElementById("searchLoader").style.display = 'block';
              $('#localityList').html(data); // replace the contents coming from php file
        //   alert(data);
     document.getElementById("searchLoader").style.display = 'none'; 
            }  
        });  

    }

This is the second set of chck boxes with Localities

<div class="locality" id="localities">
            <input type="checkbox" onClick="changeLocality();" id="1" value="<?php echo $locality['locality_name'];?>" name="Locality_check[]"><?php echo $locality['locality_name'];?> <span class="grey">(<?php echo $locality['total'];?>)</span>
        </div>

I have called a function similar to the above one and posted it to a different page.
Here is the second chck box function:

function changeLocality(){
    var dataLocality = {'locality[]' : []};
        $("input:checked").each(function() {
            var chcklocal = $(this).val();
            //alert(chcklocal);
            dataLocality['locality[]'].push($(this).val());
        });

 $.ajax({
 type : 'POST',
 url : 'processLocality.php',
 data : dataLocality,
 success : function(dataLocality){
    // document.getElementById("newloader").style.display ="block";
          $('#project_section').html(dataLocality);        // replace the contents coming from php file
          //alert('data');
   // document.getElementById("newloader").style.display ="none";

        }  
    });

}

But,when I select a region box and then a locality box and then deselect the region,I also get the previous locality value in the region array(name of the array is venue)I want only regions to go in the venue array and regions+localities in the locality array.Actually,if I deselect the region subsequent locality value should also be removed from the array.Also,eventhough I am posting them to different pages the region page holds the locality values.I am stuck as not much of JQUERY knowledge.
Went through posts,but was not able to fix it.Any help would be appreciated.

EDIT
I get an array when I check the first set of chck boxes,and also filter the records using above functions.

Array
 (
    [venue] => Array
    (
        [0] => Pune East
        [1] => Pune West
        [2] => Pune North
        [3] => Pune South
    )

)

If I now click on any of the second set of chck boxes,I get an array of this sort.

 Array
 (
  [locality] => Array
    (
        [0] => Pune East
        [1] => Pune West        //[0] and [1] are regions
        [2] => Aundh
        [3] => Kalyaninagar     //[2] and [3] are localities
    )

)

Note: A region can have multiple localities.But I want both of them to be different arrays as they are two different parameters to the SQL query for filtering the data.
Hope I am clear enough now!
Is my approach RiGHT??Or can it be done in an easier way?

Thanks

Answer 1

Well now I think its a stupid mistake!! 😛
The issue was with the names of the checkboxes. In Javascript we cannot have venue[] brackets[] in the name of the checkboxes.I presumed it to be similar to PHP for posting arrays.
Learnt it after some reading and search!!!Issue is resolved
Thanks to those who answered.