jQuery UI 滑块不允许我将其当前值传递给 URL

Question

我目前正在为客户处理this site，今天我发现我无法将当前值从 jQuery 滑块传递到 URL 以过滤来自 SQL 查询的结果时遇到了困难。

从网站上的界面来看应该很清楚我想要完成什么，用户应该能够选择他们想要购买的产品类型，这当前会刷新页面并将值传递给 url按钮被按下。

        <form name="pumpType" action="<?php echo $_SERVER['PHP_SELF']; ?>?s=<?php echo $pType ?>&p=<?php echo $pVal ?>&g=<?php echo $gVal ?>" method="get" align="center">
            <div class="btn-group" data-toggle="buttons-radio">
              <button type="submit" class="<?php if( $pType == 'intermittent' ){ echo 'active '; } ?>btn btn-primary waitingUiBut" id="but1" name="s" value="intermittent">INTERMITTENT</button>
              <button type="submit" class="<?php if( $pType == 'continuous' ){ echo 'active '; } ?>btn btn-primary waitingUiBut" id="but4" name="s" value="continuous">CONTINUOUS</button>  
            </div>
        </form>

我的客户希望用户能够在过滤类别后进一步细化查询结果，我选择使用滑块来完成此操作。 当滑块值更改时，我希望我的 SQL 查询运行，不断完善结果集（我假设我必须使用 AJAX 来执行此操作？如果我错了请纠正我）。我遇到的问题是只有 ?s= 变量被发送到 URL， ?p 和 ?g 变量都没有被识别。

SQL 查询 -

$pType = $_GET['s'];

$pVal = $_GET['p'];
$gVal = $_GET['g'];


$sql = "SELECT * FROM pumps 
        WHERE pump_type='$pType'
        AND flow_psi <= '$pVal'
        AND flow_gpm <= '$gVal'
        AND high_psi <= '$pVal'
        AND high_gpm <= '$gVal'";

jQuery Ui 滑块标记 -

    <div align="center" class="productSlider">
        <form name="pumpSlider" action="?s=<?php echo $pType ?>&p=<?php echo $pVal ?>&g=<?php echo $gVal ?>" method="get">
            <p class="inlineLabel">PSI</p><div class="filterSlider" id="psiSlider" name="p" value="1000"></div>
            <p class="inlineLabel">GPM</p><div class="filterSlider" id="gpmSlider" name="g" value="1000"></div>
        </form>
    </div> 

jQuery滑块提交代码（最终由AJAX处理）

          $(document).ready(function() {
          $("#psiSlider" ).slider({
              // options
              start: function (event, ui) {
              },
              slide: function( event, ui ) {
                  var curValue = ui.value || initialValue;
                  var target = ui.handle || $('.ui-slider-handle');                                     
                  var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
                  $(target).html(tooltip);

              },
              change: function(event, ui) {
                 $('#pumpSlider').submit();
              }
          });

          $("#gpmSlider" ).slider({
              // options
              start: function (event, ui) {
              },
              slide: function( event, ui ) {
                  var curValue = ui.value || initialValue;
                  var target = ui.handle || $('.ui-slider-handle');                                     
                  var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
                  $(target).html(tooltip);

              },
              change: function(event, ui) {
                 $('#pumpSlider').submit();
              }
          });
      });  

为什么我的 p 和 g 变量没有在表单提交时被捕获？任何建议将不胜感激。

Answer 1

您的问题是您的“p”和“g”都在 div 标签中，而 div 标签没有 value 属性。您可以使用输入字段并将其隐藏，以便为这些字段设置值。

<p class="inlineLabel">PSI</p><div class="filterSlider" id="psiSlider"></div>
<p class="inlineLabel">GPM</p><div class="filterSlider" id="gpmSlider"></div>

<input type="hidden" name="p" value="1000" />
<input type="hidden" name="g" value="1000" />

然后，当您移动滑块时，请确保它正在使用/替换输入的值，而不是尝试使用 div 上的值。