将隐藏字段值替换为NoUiSlider值，以传递给PHP [英] Replace hidden field value with value of NoUiSlider value to pass to form 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">
    &pound;<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屋！