表单提交取消了我的 URL 查询字符串中的参数

Question

我正在为客户构建一个网络应用程序，我现在处于系统初稿几乎完成的阶段，但是我遇到了一个最终问题，这让我无法舒适区。

页面功能通过使用跨三个变量的 GET 请求来通过 SQL 查询过滤数据，这些变量 s、p 和 g 在表单提交时传递到 URL 以执行搜索。除了每当我尝试切换滑块时，一切都工作正常，我的 ?s 参数从 URL 中删除，导致查询中断（ s 由于某种原因没有被提交。）。关注页面can be seen here

获取变量和查询 -

$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'";

表格-

  <form id="pumpSlider" 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>


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

           <input id="pS" type="hidden" name="p" value="<?php echo $pVal ?>" />
           <input id="gS" type="hidden" name="g" value="<?php echo $gVal ?>" />
      </div>
 </form>

最后，我使用了一些基本的 javascript 来处理表单的提交事件，以应对滑块值的变化。

    $(document).ready(function() {
    $("#psiSlider" ).slider({
              // options
              start: function (event, ui) {
                  // code

                },
                slide: function( event, ui ) {
                  var curValue = ui.value || initialValueA;
                  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);


                  var valA = $('#psiSlider').slider("value");
                  document.getElementById('pS').value = valA;   
                  var valB = $('#gpmSlider').slider("value");
                  document.getElementById('gS').value = valB;                   

                },
                change: function(event, ui) {
                  var val = $('#pS').slider("value");
                  var val = $('#gS').slider("value");
                  $('#pumpSlider').submit();
                }
           });
        });

我的想法完全被难住了，如果有人有任何意见，我将不胜感激，谢谢。

Answer 1

您的表单具有与action URL 中的参数同名的隐藏输入。由于表单使用method="get"，输入值会附加到URL，所以URL有多个同名参数。 PHP 使用最后一个，它是来自表单的值，而不是 URL。

如果您希望能够区分表单字段和 URL 参数，请给它们不同的名称，或使用method="post"。在后一种情况下，您可以使用 $_GET 检索 URL 参数，使用 $_POST 检索表单输入。