Question

我有一个简单的Google图片搜索表单，该表单会在新窗口中打开。当我想将表单参数更改为Unsplash（在其URL搜索中不使用查询字符串）时，表单会继续发送查询字符串;（

HTML

<input type="radio" id="google" name="image" onclick="googleImages();" checked/>
<label for="google">Google Images</label>

<input type="radio" id="unsplash" name="image" onclick="unsplash();"/>
<label for="unsplash">Unsplash</label>

<form id="form" method="GET" action="https://www.google.com/search?q=">
    <input id="input" type="text" name="q" value="" required>
    <input type="submit" value="Search" onclick="this.form.target='_blank';">
    <input id="helper" type="hidden" name="tbm" value="isch">
</form>

JS

var
  form = document.getElementById("form"),
  input = document.getElementById("input"),
  helper = document.getElementById("helper");

function googleImages() {
  form.action="https://www.google.com/search?q=";
  input.name="q";
  helper.name="tbm";
  helper.value="isch";
}
function unsplash() {
  form.action="https://unsplash.com/search/photos/";
  input.name="";
  helper.name="";
  helper.value="";
}

如何创建一个从输出URL中删除查询字符串的函数？（并在单选选项需要它们时再次设置参数）

请参见此处的代码：http://jsbin.com/qitadepoxu/1/edit?html,js,output

Answer 1

因此，如果您不向unsplash.com发送任何参数，请不要使用表单提交。而是在unsplash（）函数中使用javascript重定向。

<div class="black-but-transaprent">Test</div>

Answer 2

您已在注释中澄清，调用Unsplash时，您需要将搜索字符串作为URL的一部分而不是作为查询字符串参数来传递，例如：https://unsplash.com/search/photos/lion

要使用当前设置进行此操作，您需要做两件事：

将字符串添加到URL，然后
禁用表单字段。禁用的表单字段根本不会与表单一起发送； link to spec。（当然，您也可以删除，但是，如果您在某个时候更改了表单，使其具有target="_blank"或类似名称，则删除它们会使进行Unsplash搜索后紧跟一个Google图片搜索。）

是这样的：

function unsplash() {
  // #1
  form.action="https://unsplash.com/search/photos/" + encodeURIComponent(input.value);
  // #2
  input.disabled = true;
  helper.disabled = true;
  helper.disabled = true;
}

请注意使用encodeURIComponent。

当然，如果您确实要更新页面，以便它打开一个新窗口而不是替换当前窗口，则需要更新googleImages函数以将disabled设置为{{1} }放在这些输入上（因为false函数将其留在true上）。不过，如果要替换页面，则不必这样做。

删除查询字符串“？”在HTML表单方法GET中

2 个答案: