Getting value of JQuery UI Slider for PHP query

Question

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>

You're really asking two questions here: How to get slider values, and how to post data to a server-side script (and probably handle the response). Which specifically are you having trouble with? — Patrick Q, Mar 09 '16 at 18:33
@PatrickQ - Sorry, I don't really have a way with words. But yes, I am just having troubles with how to get the slider values. — Freddy, Mar 09 '16 at 19:16

score 1 · Answer 1 · answered Mar 09 '16 at 18:34

1

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

answered Mar 09 '16 at 18:34

BeoWulf

627
2
6
18

I am using a form (I have updated my question with the full form). The slider is of type text, meaning I can only add one `name` to it? The value's itself can range anything between 0-50. Normally, I would do `$_POST['name_here']` but since this is of type text, and I require two sets of data, thats where my problem occurs – Freddy Mar 09 '16 at 19:15

score 1 · Accepted Answer · answered Mar 09 '16 at 20:50

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>

Sorry for the late reply, was adding a new `age` field in my database for this to work. Nevertheless, thank you! the above works like a charm! — Freddy, Mar 11 '16 at 14:54

Getting value of JQuery UI Slider for PHP query

2 Answers2