Sending two arrays using ajax post request
- by sachin taware
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 http://www.proptiger.com/property-in-pune-real-estate.php 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
)
)
