[英]how to send all search filter values in jquery ajax and get the result?
我有搜索過濾器選項,如復選框,單選按鈕,如何獲取復選框選中值的值並獲取選定的單選按鈕,然后將該值發送至mysql搜索查詢以獲取結果。 請檢查以下代碼
注意:現在,我將分別發送值復選框和單選按鈕值,這在用戶過濾后不會給出確切的結果。
<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);
}
})
})
在模型文件中
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')."')";
}
將整個發送數據轉換為JSON格式,並將其發送到PHP代碼。 您可以在哪里使用它以作進一步使用。
我解決了通過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
});
}
})
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.