javascript - 获取用于 PHP 查询的 JQuery UI Slider 的值

Question

我为年龄实现了 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>

Answer 1

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

这是未经测试的，但它的要点是您创建了两个隐藏的表单字段，每个字段对应一个年龄值。然后，在 slide slider 的处理程序，您将这些输入的值设置为相应 slider 的值。在您的 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>