我在我的网站上使用了 NoUiSlider JS 插件,它允许用户使用 slider 来选择预算,这很好,但我希望他们选择的值(value)包含在联系/报价表中。
我在表单中添加了一个隐藏字段,我认为该值需要从 NoUiSlider 部分替换。
这是我的代码,有什么想法吗?
<div id="slider-range"></div>
<div id="budget_value">
£<div id="slider-range-value"></div>
</div>
<input type="text" name="budget" value="" id="budget" class="hid"/>
<script>
var rangeSlider = document.getElementById('slider-range');
noUiSlider.create(rangeSlider, {
start: [ 1500 ],
step: 250,
range: {
'min': [ 0 ],
'max': [ 10000 ]
}
});
var rangeSliderValueElement = document.getElementById('slider-range-value');
rangeSlider.noUiSlider.on('update', function( values, handle ) {
rangeSliderValueElement.innerHTML = values[handle];
});
</script>
亲切的问候 利亚姆
最佳答案
首先有一个隐藏的输入类型:
<input type="hidden" name="budget" value="" id="budget-input" />
那么你只要设置值如下:
var budgetInput = document.getElementById('budget-input');
rangeSlider.noUiSlider.on('update', function( values, handle ) {
rangeSliderValueElement.innerHTML = values[handle];
budgetInput.value = values[handle];
});
关于javascript - 将隐藏字段值替换为 NoUiSlider 值的值以传递给 PHP 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33366971/