如何从 <form> 标签生成的 URL 中删除具有空白响应的参数？

Question

我正在用 HTML 编写一个搜索框，它接受用户输入并将其作为参数附加到 URL。表单的代码如下所示。

<form name="form" action="" method="get">
    <input type="text" name="id" id="idresponse">
    <input type="submit" value="Submit">
</form>

这会将用户从example.com/test.html 带到example.com/test.html?id=12345678，假设他们在文本框中输入了12345678。

但是，如果用户没有输入任何内容并单击提交，他们将被带到example.com/test.html?id=，这是我不想要的。如何修改代码以便表单知道某个字段留空并且不发送带有 URL 的参数？在这种情况下，所需的 URL 将是 example.com/test.html。

edit 20210405 2057 将输入的id从idresposne改为idresponse以避免混淆

Answer 1

所谓的URL参数就是URL的querystring。

下面的代码没有使用jQuery，但是实现了类似的效果。 （由 RobG 撰写）

<form name="form" onsubmit="disableEmptyInputs(this)" action="" method="get">
    <input type="text" name="id" id="idresponse">
    <input type="submit" value="Submit">
</form>
<script>
function disableEmptyInputs(form) {
  var controls = form.elements;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    if (controls[i].value == '') controls[i].disabled = true;
  }
}
<script>

这将删除所有参数，但 ?仍将跟踪 URL。即 URL 将改为 example.com/test.html?。但是，这并不重要，因为它们都指向同一个地址。

请参阅这些链接（由 Progman 友情提供）以了解其他方法，包括使用 jQuery。

• Delete empty values from form's params before submitting it
• Delete empty values from form's params before submitting it
• How can I remove empty fields from my form in the querystring?

谢谢。