从 jquery 滑块中获取值

Question

我正在创建一种注册表单，我使用 FORM 标签来表示姓名等，我还需要滑块。我用 jquery 创建了我的滑块。 有什么方法可以从这个滑块“转发”值，就像我从 FORM 标签输入中一样，用于 php 脚本？ 谢谢

<p style="text-align: center">Amount: <span id="amountDisp" style="color: #ff0000">500</span><div id="amount_slider"></div></p>

function () {
$("#amount_slider").slider({
            handle: "myhandle",
    orientation: "horizontal",
    range: false,
    min: 500,
    max: 4999,
    value: 500,
    step: 1,
            animate: true,
    change: function (event, ui) {
        $("#amount").text(ui.value);
        calculate();
    },
            slide: function (event, ui) {
        $("#amountDisp").text(ui.value);
    }
});

Answer 1

要将值发布到服务器上的 php，您需要一些在滑块更改时保存值的文本字段。您可以使用隐藏输入。在这个隐藏的输入中设置值，它将与其他表单元素一起发布。

将html改成如下--

<p style="text-align: center">
   Amount: <span id="amountDisp" style="color: #ff0000">500</span>
   <div id="amount_slider"></div>
   <input type="text" id="amount_field">
</p>

我没有使用 hidden 输入来进行演示，而是将 js 更改为 --

$("#amount_slider").slider({
    handle: "myhandle",
    orientation: "horizontal",
    range: false,
    min: 500,
    max: 4999,
    value: 500,
    step: 1,
    animate: true,
    change: function (event, ui) {       
        $("#amount_field").val(ui.value);
        $("#amountDisp").text(ui.value);
        calculate();
    },
     slide: function (event, ui) {
        $("#amount_field").val(ui.value);
        $("#amountDisp").text(ui.value);        
    }
});

SEE DEMO

更新

如果您使用ajax 提交表单，您可以直接从amountDisp 中选择值 -

var sliderAmount = $("#amountDisp").text();