jQuery在一个窗体上显示多个滑块

我的页面中有多个滑块表单：如下所示。对于一个表单，它可以正常工作，但是对于多个滑块表单，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>

你和这个人的关系有多牢固？




请这位朋友借给你100美元或更多，你会有什么感受？

---

如何正确传递post值？

您需要为所需的每个滑块添加一个

div

，并为滑块提供一个属性，将其链接到

输入

-这是一个使用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>

这里重要的部分是值的设置-它从滑块div中获取

id

属性，将

\u question

添加到该属性中，然后找到具有匹配的

name

属性的

输入


注意：您没有在
输入上指定默认值，因此如果用户要提交，您将不会得到任何提交（在我的示例中，您将这样做）
您需要为所需的每个滑块添加一个
div
，并为滑块提供一个属性，将其链接到
输入
——这是一个以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>

这里重要的部分是值的设置-它从滑块div中获取
id
属性，将
\u question
添加到该属性中，然后找到具有匹配的
name
属性的
输入


注意：您没有在
输入上指定默认值，因此如果用户要提交，您将不会得到任何提交（在我的示例中您将这样做）
只需更改即可

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

到

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

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

到

通过将隐藏字段更改为文本进行测试。
我不确定我是否理解这里的内容。据我所知，表单有两个隐藏的输入，但没有与之关联的值。当您提交表单时，我认为不会为这些输入字段提交任何值，因为它们A.没有默认值，B.用户无法输入值，因为它们是隐藏的。您的滑块代码正在尝试更改标签标签
$（“.amount”）.val（…
（甚至没有值属性），而不是隐藏的表单字段。上面html中的第二个滑块在哪里？我正在寻找另一个。Ops，我不知道。谢谢你警告我。我不知道你在这里有什么。据我所知，你的表单有两个隐藏输入，但没有与之相关的值。当你提交表单时，我会想象没有值会被提交无法为这些输入字段设置值，因为它们A.没有默认值，B.用户无法输入值，因为它们是隐藏的。您的滑块代码正在尝试更改标签标记
$（“.amount”）.val（…
（甚至没有值属性），而不是隐藏的表单字段。上面html中的第二个滑块在哪里？我正在寻找另一个。Ops，我不知道。谢谢你提醒我。谢谢，这正是我真正想要的。还有一件事：如何设置默认值？@DiogoperaAdd
value=“0”
到
输入
s，其中
0
是您的默认提交值-您应该将其与滑块初始值中的
值
属性相匹配谢谢，这是我真正想要的。还有一件事：如何输入默认值？@DiogoPereira add
value=“0”
到
输入
s，其中
0
是您的默认提交值-您应该将其与滑块初始化中的
值
属性相匹配