how to send all search filter values in jquery ajax and get the result?

Question

I have search filter option like checkbox, radibutton how to get the values of checkbox checked value and get the selected radio button and send the value to mysql search query to get the result. Please check with the below code

Note: Right now I am sending the values checkbox and radio button value seperately which will given not exact results as user filtered.

<li><label class="add"><input type="checkbox" class="location_check" name="iCheck[]" value="East Valley">East Valley</label>
 </li>
        <li><label class="add"><input type="checkbox" class="location_check" name="iCheck[]" value="Central/South Valley">Central/South Valley</label>
 </li>

  \\radio button

 <li><label class="add"><input type="radio" class="budget_filter" name="iCheck" value="open">
             OPEN</label></li>
                             <li><label class="add"><input type="radio" class="budget_filter" name="iCheck" value="500">
             LESS THAN $500</label></li>
                             <li><label class="add"><input type="radio" class="budget_filter" name="iCheck" value="1000">
             LESS THAN $1000</label></li>



$('.location_check').on('ifChecked', function(event){

 var values = new Array();
$("input.location_check[type=checkbox]:checked").each(function(){;

    values.push($(this).val());
})

var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
    data:'location_checkboxes='+ values +'&page='+track_click,
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (html) {
         $('#jobsfound').html(html);
    }

    })


  })

  $('.budget_filter').on('ifClicked', function(event){

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

var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
    data:'search_data=' + get_value + '&page='+track_click,
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (html) {
         $('#jobsfound').html(html);
    }

    })

})

In Model file

if($this->input->post('search_data')=="open"){
        $where = "and rs.budget >= 0";
    }else if($this->input->post('search_data')){
        $where = "and rs.budget < $this->input->post('search_data')";
    }else{
        $where = "";
    }
    echo $where;


    if($this->input->post('location_checkboxes')){
        $where = "and FIND_IN_SET(a.neighborhood_area, '".$this->input->post('location_checkboxes')."')";
    }

Answer 1

I solved using by single function call in javascript

$('input').on('ifChecked', function(event){


var mapOptions = {
    center: new google.maps.LatLng(10.670044, -61.515305),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 


 var values = new Array();
$("input.location_check[type=checkbox]:checked").each(function(){

    values.push($(this).val());
})
 var budget_value;
if($('input.budget_filter:checked').val()){
  budget_value = $('input.budget_filter:checked').val();
}else{
    budget_value = "";
}

var job_date;

if($('input.job_date:checked').val()){
  job_date = $('input.job_date:checked').val();
}else{
    job_date = "";
}





var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
      dataType:"json",
    data:'location_checkboxes='+ values + '&budget_value=' + budget_value  + 
    '&job_dates=' + job_date  + '&page='+track_click,
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (html) {
         $('#jobsfound').html(html);
         alert($("#test").text());
        //initialize();
         new google.maps.Marker({
                position: new google.maps.LatLng(33.493889, -111.922874),
                map: map,
                //icon: new google.maps.MarkerImage( src, new google.maps.Size(100, 106), new google.maps.Point(0, 0), new google.maps.Point(50, 50) ),
               // title: c.name
          });


    }

    })


})

Answer 2

Convert your whole sending data into JSON format and send it to your PHP code. Where you can use it for further use.