几种带有 OnChange 事件的表单答案

【问题标题】：Several forms with OnChange event几种带有 OnChange 事件的表单
【发布时间】：2016-04-08 01:45:39
【问题描述】：

我有一个下拉列表和一个输入字段。我希望在修改下拉列表后立即更改 URL。

<?php $s = $_GET["s"]; $q = $_GET["q"]; ?>
<form method="get" action="" name="formulaire" >
   <input type="text" name="q" value="<?php echo $q; ?>" />
   <select name="s" onchange="if (this.value) window.location.href=this.value">
   <option <?php if ( $s == 'opt1' ) { echo 'value="opt1" selected="selected" >opt1 '; } else { echo 'value="opt1" >opt1 '; } ?></option>
   <option <?php if ( $s == 'opt2' ) { echo 'value="opt2" selected="selected" >opt2 '; } else { echo 'value="opt2" >opt2 '; } ?></option>
   <option <?php if ( $s == 'opt3' ) { echo 'value="opt3" selected="selected" >opt3 '; } else { echo 'value="opt3" >opt3 '; } ?></option>
   </select>
</form>

现在，它仅在输入字段在列表之前填充时运行。我试图用value="?s=opt1" 替换value="opt1"。但是输入字段填完后，URL是这样的?q=test&s=%3Fs%3Dopt1。

这是我期待的网址：

如果只填充文本区域：?q=text

如果只选择下拉列表：?s=opt1

如果输入字段和下拉列表都被填充/选中：?q=texte&s=opt1

这是一个例子：http://arkhana.fr/tempstack/menudyn.php

【问题讨论】：

文本区域是指输入字段吗？
好的，抱歉，我的意思是输入字段。我刚刚编辑了我的帖子。
当您设置window.location.href 时，您会导致页面重定向到给定地址。检查这个stackoverflow.com/questions/4282069/…
好的，我刚刚编辑了我的示例...但是一旦发生更改，是否仍然可以使用 GET 方法获取参数？我怎样才能对输入字段做同样的事情？
您的样本只设置了哈希值。我认为它不会重新加载页面。您是否希望新 url 没有哈希，即。只有url参数？

标签： javascript php onchange

【解决方案1】：

试试这个。使用选择 onchange="loadUrl()"。假设选项 value="opt1" 像上面...没有“？=”等我在您的示例页面上看到 ATM。

将以下脚本放在页面上：

function loadUrl() {
  var params = [];
  var inpVal = document.getElementsByName("q")[0].value;
  if (inpVal.length) params.push("q="+inpVal);
  var selVal = document.getElementsByName("s")[0].value;
  if (selVal.length) params.push("s="+selVal);

  window.location.search = params.join("&");
 }

【讨论】：

差不多好了，谢谢。最后一个问题是列表的选择按钮总是试图关闭（参见我的示例页面）。抱歉，我不知道 ATM 是什么？
ATM = 此刻...我看到您更改了代码。是的，我改变了一个错误；）