获取用于 PHP 查询的 JQuery UI Slider 的值答案

【问题标题】：Getting value of JQuery UI Slider for PHP query获取用于 PHP 查询的 JQuery UI Slider 的值
【发布时间】：2016-03-10 04:50:03
【问题描述】：

我已经为年龄实现了 JQuery UI Slider：

Javascript：

 <script>
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 50,
                values: [ 0, 50 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            });
            $( "#amount" ).val( "" + $( "#slider-range" ).slider( "values", 0 ) +
                " - " + $( "#slider-range" ).slider( "values", 1 ) );
        });
</script>

HTML

<td> <label for="amount">Age:</label></td>
<td>         
    <div id="ageslider">
      <p><input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /></p>
            <div id="slider-range"></div>
    </div> 
</td>

我需要获取 PHP 查询的两个值（年龄从和年龄到）。我见过类似的问题here，但它与 PHP 无关。如何获取值并将其分配给 PHP 查询的 var？

编辑：

完整形式：

<form action="#" method="POST" enctype="multipart/form-data">
                        <td> <label for="amount">Age:</label></td>
                        <td>         
                            <div id="ageslider">
                              <p><input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /></p>
                                    <div id="slider-range"></div>
                            </div> 
                        </td>
                        <td rowspan="2">
                            <input type="submit" class="btn btn-info" name="submit" value="Click to start chat! " />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="amount">Gender:</label> </td>
                        <td>
                            <input type="radio" name="gender" value="male">Male</input>
                            <input type="radio" name="gender" value="female">Female</input>
                        </td>
                        </form>

【问题讨论】：

您实际上是在问两个问题：如何获取滑块值，以及如何将数据发布到服务器端脚本（并可能处理响应）。您具体遇到了哪些问题？
@PatrickQ - 抱歉，我真的没有办法用文字。但是，是的，我只是在如何获取滑块值方面遇到了麻烦。

标签： javascript php jquery

【解决方案1】：

首先，它与您的问题并不真正相关，但您在表单开头缺少一个开头<tr>，在表单末尾缺少一个结尾</tr>。我已经在下面添加了它们。

这是未经测试的，但它的要点是您创建两个隐藏的表单字段，一个用于每个年龄值。然后，在滑块的slide 处理程序中，将这些输入的值设置为相应滑块的值。在您的 PHP 代码中，您将使用 $_POST['age_from'] 和 $_POST['age_to']。

HTML

<form action="#" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="age_from" id="age_from" value="0"/>
    <input type="hidden" name="age_to" id="age_to" value="50"/>
    <tr>
        <td> <label for="amount">Age:</label></td>
        <td>         
            <div id="ageslider">
                <p>
                    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
                </p>
                <div id="slider-range"></div>
            </div> 
        </td>
        <td rowspan="2">
            <input type="submit" class="btn btn-info" name="submit" value="Click to start chat! " />
        </td>
    </tr>
    <tr>
        <td><label for="amount">Gender:</label> </td>
        <td>
            <input type="radio" name="gender" value="male">Male</input>
            <input type="radio" name="gender" value="female">Female</input>
        </td>
    </tr>
</form>

Javascript：

<script>
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 50,
                values: [ 0, 50 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                    // when the slider values change, update the hidden fields
                    $("#age_from").val(ui.values[ 0 ]);
                    $("#age_to").val(ui.values[ 1 ]);
                }
            });
            $( "#amount" ).val( "" + $( "#slider-range" ).slider( "values", 0 ) +
                " - " + $( "#slider-range" ).slider( "values", 1 ) );
        });
</script>

【讨论】：

抱歉回复晚了，我在我的数据库中添加了一个新的age 字段以使其正常工作。尽管如此，还是谢谢你！上面的作品就像一个魅力！

【解决方案2】：

这取决于您如何将该数据发送到服务器。

您提供的代码并没有给出整个表单（假设您使用的是表单），但是您拥有它的方式只需要在输入中添加名称属性，例如name="age_from"，一旦发布，您将可以通过$_POST['age_from'] 获取值

【讨论】：

我正在使用一个表格（我已经用完整的表格更新了我的问题）。滑块是文本类型，这意味着我只能添加一个name 吗？该值本身的范围可以在 0-50 之间。通常，我会做$_POST['name_here']，但由于这是文本类型，而且我需要两组数据，这就是我的问题发生的地方