将隐藏字段值替换为NoUiSlider值,以传递给PHP [英] Replace hidden field value with value of NoUiSlider value to pass to form PHP
本文介绍了将隐藏字段值替换为NoUiSlider值,以传递给PHP的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的网站上使用了NoUiSlider JS插件,允许用户使用滑块来选择预算,这很棒,但我希望他们选择的值作为联系/报价表单的一部分。
I have used the NoUiSlider JS plugin on my website which allows the user to use a slider to select a budget, which is great but I want the value they choose to be included as part of a contact/quote form.
我在表单中添加了一个隐藏字段,我假设该值需要从NoUiSlider部分替换。
I have added a hidden field to the form which I assume the value needs to replace from the NoUiSlider part.
这是我的代码,任何想法?
Here is my code, any ideas?
<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>
亲切的问候
Liam
Kind regards Liam
推荐答案
首先有一个隐藏的输入类型:
First of all there is a hidden input type:
<input type="hidden" name="budget" value="" id="budget-input" />
然后你只需设置如下价值:
Then you just set the value as follows:
var budgetInput = document.getElementById('budget-input');
rangeSlider.noUiSlider.on('update', function( values, handle ) {
rangeSliderValueElement.innerHTML = values[handle];
budgetInput.value = values[handle];
});
这篇关于将隐藏字段值替换为NoUiSlider值,以传递给PHP的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文