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')."')";
    }

@wrongstars I am getting the result but seperately for every checkbox and radio button this should be filtered according to the checkbox value and radio button values — Parker, Dec 11 '15 at 13:35

score 1 · Answer 1 · answered Dec 11 '15 at 11:40

1

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

answered Dec 11 '15 at 11:40

Ahmed Khan

518
4
12

Yes i know how to convert but how send using single function for checkbox,radiobutton Please c heck with my code i have seperate funtion – Parker Dec 11 '15 at 13:34
Make a global array variable save your check box and radio button values in that then send that array as json. – Ahmed Khan Dec 11 '15 at 13:50
Here is the example at [jsfiddle](http://jsfiddle.net/ahmedkhan92/5a856w0q/) I have customized your code with array and save it JSON. – Ahmed Khan Dec 12 '15 at 08:18
let me know it works here is example question at [stack overflow](http://stackoverflow.com/questions/20227789/send-post-form-data-in-json-format-via-ajax-with-jquery). – Ahmed Khan Dec 12 '15 at 08:21

score 0 · Accepted Answer · answered Dec 14 '15 at 13:22

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
          });


    }

    })


})

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

2 Answers2