使用`form`

Question

我现在正在尝试搜索表单，该表单使用一个文本框发送到两个不同的页面，两个不同的按钮。到目前为止，我这样做：

<form action="http://www.youtube.com/results" method="get">
<input name="search_query" type="text" maxlength="128" />
<input type="submit" value="YouTube" />
</form>

<form action="https://torrentz.eu/search" method="get">
<input name="q" type="text" maxlength="128" />
<input type="submit" value="TorrentZ" />
</form>

当然结果如下：

nice and clean

我可以使用它，但我想让它像这样“可爱”：

nice and clean

到目前为止，我已尝试使用脚本，但我没有得到它所以我抓了它，然后我尝试制作if / elseif但又一次，我不知道我在做什么，对于我所看到的，我不是一个好的策划者，切换按钮或保管箱不是那么快，因为我只需要按Tab键一次或两次进入只搜索我想要的地方。

另外请注意，我只是为Chrome制作个人“新标签”，因为基本和我在扩展程序中找到的那些对于我的迷你笔记本来说非常重。

Answer 1

在HTML5中，您可以使用formaction属性。

<!DOCTYPE html>
<html>
  <body>
    <form>
      <input name="search_query" type="text" maxlength="128" />
      <input type="submit" formaction="http://www.youtube.com/results" value="YouTube" />
      <input type="submit" formaction="https://torrentz.eu/search" value="TorrentZ" />
    </form>
  </body>
</html>

Answer 2

由于您尝试过失败的脚本，让我们看看我们可以实现的目标。

使用`form`

要非常警惕你在这里做的事情。使用get发送form请求很容易，但它总是“刷新”已经存在于操作URL中的查询字符串，并通过在其子节点中添加名称 - 值对来提交请求。确保将查询创建为子节点。

<input type="text" id="box" name="searchbox" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="button" value="Youtube" onclick="search_youtube()"/>
<input type="button" value="Torrentz" onclick="search_torrentz()"/>
<script>
   function search_youtube(){
    var add="https://www.youtube.com/results";       
    var box = document.getElementById("box");
    box.name="search_query"
    if(box.value)
    {
        var form = open().document.createElement("form");
        form.action=add;
        form.appendChild(box.cloneNode(false))
        form.submit();
    }
   } 

  function search_torrentz(){
    var add="https://www.torrentz.com/search";             
    var box = document.getElementById("box");
    box.name="q"
    if(box.value)
    {
        var form = open().document.createElement("form");
        form.action=add;
        form.appendChild(box.cloneNode(false))
        form.submit();
    }
  }
</script>

使用HTML5 `formaction`属性

<form action="https://www.youtube.com/results" method="GET">
    <input type="text" id="box" name="search_query" maxlength="128" placeholder="Type text to be searched here" autofocus />
    <input type="submit" value="Torrentz" formaction="https://www.torrentz.com/search" onclick="document.getElementById('box').name='q'" />
    <input type="submit" name="submit" value="Youtube" />
</form>

HTML表单动作搜索，一个文本框，2个按钮，2个可能的结果

2 个答案:

使用`form`

使用HTML5 `formaction`属性

HTML表单动作搜索，一个文本框，2个按钮，2个可能的结果

2 个答案:

使用form

使用HTML5 formaction属性

使用`form`

使用HTML5 `formaction`属性