单个表单上的 jQuery 多个滑块答案

【问题标题】：jQuery multiple sliders on a single form单个表单上的 jQuery 多个滑块
【发布时间】：2012-04-03 10:31:54
【问题描述】：

我的页面中有多个滑块表单：例如one。对于一个它工作正常，但对于多个滑块形式的 php post 值返回空。

到目前为止我有：

jQuery:

    $(function() {
    $( ".slider" ).slider({
        value:0,
        min: -1,
        max: 1,
        step: 0.01,
        slide: function( event, ui ) {
            $( ".amount" ).val( "$" + ui.value );
        }
    });
    $( ".amount" ).val( "$" + $( ".slider" ).slider( "value" ) );
});

我的html：

<div class="demo">
    <form action="next.php" method="post">
        <p>
            <label class="amount">How strong is your relationship with this person?</label>
            <input type="hidden" name="first_question" />
        </p>
        <div class="slider"></div>
        <br/>
        <p>
            <label class="amount">How would you feel asking this friend to loan you $100 or more?</label>
            <input type="hidden" name="second_question" />
        </p>
        <input type="submit" value="Submit" />
    </form>
</div>

如何正确传递帖子值？

【问题讨论】：

不确定我是否了解您在这里的内容。据我所知，您的表单有两个隐藏的输入，但没有与它们关联的值。当您提交表单时，我想这些输入字段不会提交任何值，因为它们 A. 没有默认值和 B. 用户无法输入值，因为它们是隐藏的。
您的滑块代码试图更改标签标签$( ".amount" ).val(... 的值（甚至没有值属性），而不是隐藏的表单字段。
上面 html 中的第二个滑块在哪里？我正在寻找另一个
.
操作，我没有意识到这一点。谢谢你警告我。

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

您需要为所需的每个滑块添加一个div，并为滑块提供一个将它们链接到input 的属性 - 这是一个使用您的 HTML 作为起点的示例：

<div class="demo">
    <form id="myform" action="next.php" method="post">
        <p>
            <label class="amount">How strong is your relationship with this person?</label>
            <input type="hidden" name="first_question"/>
        </p>
        <div class="slider" id="first"></div>
        <br/>
        <p>
            <label class="amount">How would you feel asking this friend to loan you $100 or more?</label>
            <input type="hidden" name="second_question"/>
        </p>
        <div class="slider" id="second"></div>
        <br/>
        <input type="submit" value="Submit" />
    </form>
</div>

然后使用以下方法初始化滑块：

$(".slider").slider({
    step: 1,
    min: 0,
    max: 10,
    value: 5,
    slide: function(event, ui) {
        $("input[name=" + $(this).attr("id") + "_question]").val(ui.value);
    }
});

这里的重要部分是值的设置 - 它从滑块 div 中获取 id 属性，将 _question 添加到其中，然后找到具有匹配 name 属性的 input。

Working example here

注意：您没有在 inputs 上指定默认值，因此如果用户要提交，您将不会提交任何内容（就像您在我的示例中所做的那样）

【讨论】：

谢谢，这就是我真正想要的。还有一件事：如何设置默认值？
@DiogoPereira 将 value="0" 添加到 inputs 其中 0 是您的默认提交值 - 您应该将其与滑块初始化中的 value 属性匹配

【解决方案2】：

只是改变

 $( ".amount" ).val( "$" + ui.value );
        }
    });
    $( "input[type="hidden"]"  ).val( "$" + $( ".slider" ).slider( "value" ) );

到

 $( "input['text']" ).val( "$" + ui.value );
        }
    });
    $( "input[type="hidden"]" ).val( "$" + $( ".slider" ).slider( "value" ) );

通过将隐藏字段更改为文本来测试它。

【讨论】：