Getting value of JQuery UI Slider for PHP query

I have the JQuery UI Slider implemented for age:

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>

I need to get both values (age from and age to) for a PHP query. I have seen a similar question here, but it does not concern PHP. How can I get the values and assign it to a var for a PHP query?

Edit:

Full form:

<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>

Answers


First, it's not really relevant to your question, but you are missing an opening <tr> at the beginning of your form and a closing </tr> at the end of your form. I've added them in below.

This is untested, but the gist of it is that you create two hidden form fields, one for each age value. Then, in the slide handler of the slider, you set the value of those inputs to be the value of the corresponding slider. In your PHP code, you'll use $_POST['age_from'] and $_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>

It depends how you are sending that data to the server.

The code you provide doesn't give the whole form (assuming that you are using a form), but the way you have it you just need to add name attribute to the input, example name="age_from" and once posted you will be able to capture the value with $_POST['age_from']


Need Your Help

How can I determine if a DataGrid has been sorted or paged, prior to the events being triggered?

c# asp.net data-binding events datagrid

I have a DataGrid that has event handlers bound to SortCommand and PageIndexChanged. How can I determine if those event handlers are about to be called, say on page_load?