CODEWITHSUNDEEP
phpformsjquery-ui-slider
supermario
supermario

Reputation: 2755

How to use jQuery slider range in a form?

I have difficulty using the jQuery slider range in a form. To test I use a simple form and processors (originally from here):

form.php

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      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>
</head>

<body>

<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<label for="amount">Age range:</label>
  <input type="text" id="amount" name="agerange" style="border: 0; color: #f6931f; font-weight: bold; " />
</p>
 <div id="slider-range""></div>

<input type="submit">
</form>

</body>
</html>

welcome.php

<html>
<body>

Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Your age range is: <?php echo $_POST["agerange"]; ?>
</body>
</html>

The slider shows up properly however the form returns no value for age range. Not sure what value(s) this form return so that I can use that in a form processing script. Appreciate your hints

Upvotes: 2

Views: 6191

Answers (2)

Anders
Anders

Reputation: 12560

Not sure if this still applies, but I easily implemented a slider inside of a form. Here is the simplified code that I used:

»» Note that the numericToGrade() function is just something I used to convert a numerical value (0-4 in this case) to a letter grade (F,D-A). It does not affect how the script works. ««

<html>
<head>
    <link href="../css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
    <script src="../js/jquery-1.10.2.js"></script>
    <script src="../js/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript">
        // OPTIONAL: If there are other versions of jQuery running on the site,
        // this will ensure proper script operation. 'NC()' replaces '$()'.            
        var NC = jQuery.noConflict();

        NC(function() {
            NC("#slider").slider({
                value:3, max: 4,
                slide: function( event, ui ) {
                    NC("#grade").val(numericToGrade(ui.value));
                    NC("#gradedisp").html(numericToGrade(ui.value));
                }});
            var val = NC("#slider").slider("value");
            NC("#grade").val(numericToGrade(val));
            NC("#gradedisp").html(numericToGrade(val));
        });

        function numericToGrade(num) {
            switch (num) {
                case 0: return "F"; break;
                case 1: return "D"; break;
                case 2: return "C"; break;
                case 3: return "B"; break;
                case 4: return "A"; break; 
                default: return "err";
            }   
        }
    </script>  
</head>
<body>
    <form action="submit.php" method="POST">
        <label for="slider">Grade Us:</label>
        <span id="gradedisp"></span>
        <span id="slider"></span>
        <input type="hidden" id="grade" name="rating" />
    </form>
</body>
</html>

Here are a couple screenshots: First of the page, and second the inspected (generated) code through Google Chrome:

Front-End View Code-Behind View

When the slider 'slides', this is what happens: both the display element (<span id="gradedisp">) and the hidden input element (<input type="hidden" id="grade" name="rating">) get updated simultaneously. This is useful for initial debugging/final output to your users.

Note that the <span> tag requires you to use .html instead of .val like the <input> tag utilizes.

Finally, when the form is submitted, you can grab the slider's value with PHP simply using this code:

$rating = $_POST['rating'];

Hope this helps!

Upvotes: 0

lollo
lollo

Reputation: 165

Since you're working with the age you have to remove the dollar sign from the range value. replace this line :

$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

with this:

$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );

and this two lines:

$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
  " - $" + $( "#slider-range" ).slider( "values", 1 ) );

with this two:

$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
  " - " + $( "#slider-range" ).slider( "values", 1 ) );

Now you have this string in the $_POST["agerange"] (let's say) : "35+-+75" (the "+" is the replacement for the space used by php when post is sent)

so you can use the explode() function and obtain an array of two values.. like this:

<?php
$range = explode(' - ', $_POST['agerange']);
?>
 <html>
 <body>
 Welcome <?php echo $_POST["name"]; ?><br>
 Your email address is: <?php echo $_POST["email"]; ?>
 Minimum age in your range is: <?php echo $range[0]; ?><br />
 ....and maximum is: <?php echo $range[1]; ?><br />
 </body>
 </html>

Upvotes: 1

Related Questions