2

我很难在表单中使用jQuery 滑块范围。为了测试我使用了一个简单的表单和处理器（最初来自这里）：

表单.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>

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

4

2 回答 2

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>
于 2013-11-01T17:13:45.937 回答
0

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

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

<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而不是.val像<input>标签所使用的那样。

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

$rating = $_POST['rating'];

希望这可以帮助！

于 2014-06-19T18:19:47.710 回答