如何将 jQuery UI 控件转换为表单元素契约？答案

【问题标题】：How to convert jQuery UI controls to Form element contract?如何将 jQuery UI 控件转换为表单元素契约？
【发布时间】：2021-04-01 23:00:15
【问题描述】：

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

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

滑块id 和滑块值均未出现在操作网址中。为什么以及如何解决？

【问题讨论】：

标签： html jquery forms jquery-ui

【解决方案1】：

解决此问题的一种方法是在表单中隐藏一个输入字段并根据滑块的更改事件更新其值。

在这里，我添加了名称为 input1 的输入字段，因此您会在最终 URL 中看到它。此外，您可以使用 value 属性为其分配初始值。我给了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>

【讨论】：

滑块函数为什么不能自动生成？
表单标签需要有输入选项卡才能在 URL 中发送值，但查看 jQueryUI 转换滑块 div 的方式，它不会创建 input 标签，因此不会显示自动地。我不确定他们为什么选择不添加 input 标签，但我猜他们将其设计为小部件以保持其通用性。

【解决方案2】：

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);
    }
  });
});

【讨论】：