如何在表单中使用 jQuery 滑块范围？答案

【问题标题】：How to use jQuery slider range in a form?如何在表单中使用 jQuery 滑块范围？
【发布时间】：2013-10-31 19:56:14
【问题描述】：

我在表单中使用jQuery slider range 有困难。为了测试，我使用了一个简单的表单和处理器（最初来自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>

欢迎.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>

滑块正确显示，但表单不返回年龄范围的值。不确定此表单返回什么值，以便我可以在表单处理脚本中使用它。感谢您的提示

【问题讨论】：

我不确定你是否从帖子中得到结果......如果你有这样的东西：agerange=%2475+-+%24300？（在我的本地网络上试过）..你可以使用 urldecode($_POST["agerange"]); ...
我在结果欢迎页面中没有得到任何字符串，即我得到“你的年龄范围是：”
您是否使用诸如 Tamper Data 或 Firebug (firefox) 之类的调试工具？ .. 还要更正
行中引号过多的错字.. 应该是：
跨度>
宾果游戏！删除额外的 " 后，现在出现了范围。只是想知道范围的数据类型是什么？我应该如何从输出帖子中获取低位和高位数字？谢谢队友。
这是来自 Firebug 的帖子数据示例：agerange=%24153+-+%24244

标签： php forms jquery-ui-slider

【解决方案1】：

由于您使用的是年龄，因此您必须从范围值中删除美元符号。替换这一行：

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

用这个：

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

这两行：

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

这两个：

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

现在您在 $_POST["agerange"] （假设）中有这个字符串：“35+-+75” （“+”是发送帖子时php使用的空间的替换）

这样您就可以使用explode() 函数并获得一个包含两个值的数组。像这样：

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

【讨论】：

【解决方案2】：

不确定这是否仍然适用，但我很容易在表单中实现了一个滑块。这是我使用的简化代码：

»» 请注意，numericToGrade() 函数只是我用来将数值（在本例中为 0-4）转换为字母等级 (F,D-A) 的东西。它不影响脚本的工作方式。 ««

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

这里有几个屏幕截图：第一个页面，第二个是通过谷歌浏览器检查（生成）的代码：

当滑块“滑动”时，会发生以下情况：显示元素 (<span id="gradedisp">) 和隐藏的输入元素 (<input type="hidden" id="grade" name="rating">) 同时更新。这对于向您的用户进行初始调试/最终输出很有用。

请注意，<span> 标签要求您使用.html，而不是像<input> 标签所使用的.val。

最后，当提交表单时，您可以使用 PHP 简单地使用以下代码获取滑块的值：

$rating = $_POST['rating'];

希望这会有所帮助！

【讨论】：