CODEWITHSUNDEEP
javascriptphpjquery
Freddy
Freddy

Reputation: 867

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>

Upvotes: 1

Views: 1102

Answers (2)

Patrick Q
Patrick Q

Reputation: 6393

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>

Upvotes: 1

BeoWulf
BeoWulf

Reputation: 657

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

Upvotes: 1

Related Questions