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

这取决于您将数据发送到服务器的方式。

您提供的代码不会提供整个表单（假设您使用的是表单），但是您拥有它的方式只需要在输入中添加name属性，例如name="age_from"并且一旦发布您将能够使用$_POST['age_from']

捕获值

Answer 2

首先，它与您的问题无关，但您在表单开头错过了一个句号<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>

获得用于PHP查询的JQuery UI Slider的价值

2 个答案: