我想使用noUiSlider脚本和PHP在我的网站上为包创建一个过滤器选项,但我无法从表单传递或发送滑块值来处理数据并过滤它。
这是HTML表单
<div class="planfinder-form clearfix">
<form method="GET" action="search.php">
<div class="form-group col-xs-12 col-sm-12 text-center col-md-12">
<label for="price">
Price
</label>
<div >
<div class ="slider" id="slider">
<input type="hidden" name="price[]" id="slider" value=""
min="0" max="2000">
</div>
</div>
</div>
<div class="search-button form-group col-xs-12 col-sm-12 col-md-
12 align-center" style="text-align: center; padding-top: 50px;">
<input type="hidden" name="search" id="search" value="search" />
<button class="btn btn-lg btn-warning find-plan">
<i class="flaticon-search">
</i>
Find the Packages
</button>
<img id="loader_img" style="width: 40px; margin-left: 11px; display:none;" src="data/template/images/loader.png">
</div>
</div>
</form>
这是JavaScript
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [0, 2000],
connect: true,
range: {
'min': 0,
'25%': 500,
'50%': 1000,
'75%': 1500,
'max': 2000,
},
pips: {
mode: 'range',
density: 4,
values: 5
},
tooltips: true,
});
$('.planfinder-types ul a').click(function(){
var its_text = $(this).text();
its_text = its_text.replace(/\s/g, '');
if(its_text == 'MiFi/Dongles' || its_text == 'Data'){
slider.noUiSlider.destroy();
noUiSlider.create(slider, {
start: [0, 7000],
connect: true,
range: {
'min': 0,
'25%': 1000,
'50%': 2000,
'75%': 5000,
'max': 7000,
},
pips: {
mode: 'range',
density: 4,
values: 5
},
tooltips: true,
});
}else{
slider.noUiSlider.destroy();
noUiSlider.create(slider, {
start: [0, 2000],
connect: true,
range: {
'min': 0,
'25%': 500,
'50%': 1000,
'75%': 1500,
'max': 2000,
},
pips: {
mode: 'range',
density: 4,
values: 5
},
tooltips: true,
});
这是我从中获取的提交标题结果
http://localhost/package/search.php?price%5B%5D=&search=search
先谢谢