如何将jQuery UI控件转换为Form元素合约



我将滑块放入表单,但发现它没有将其值作为获取参数发送

https://jsfiddle.net/dimskraft/284x06da/3/

滑块id和滑块值都不会出现在动作url中。为什么以及如何修复?

修复它的一种方法是在表单中有一个隐藏的输入字段,并根据滑块的更改事件更新其值。

在这里,我添加了名称为input1的输入字段,所以您可以在最终的URL中看到它。此外,还可以使用值属性指定其初始值。我给了value="0"

https://jsfiddle.net/fhp81qyb/

$( "#slider" ).slider({
change: function( event, ui ) {
$('#input1').val(ui.value);
}
});
<input type="hidden" name="input1" id="input1" value="0"></input>
Slider不是表单元素;因此它不包括在表单数据中。

示例:https://jsfiddle.net/Twisty/qfbgh0z4/5/

HTML

<form action="http://localhost" method="get" target="_blank">
<div id="slider"></div>
<input type="hidden" name="slider-value" id="slider-value" value="0" />
<input type="submit" value="Submit">
</form>

JavaScript

$(function() {
$("#slider").slider({
slide: function(e, ui) {
$("#slider-value").val(ui.value);
}
});
});

最新更新