Fatal编程技术网
  • javascript/
  • Javascript HTML表单操作搜索，一个文本框，两个按钮，两个可能的结果

Javascript HTML表单操作搜索，一个文本框，两个按钮，两个可能的结果

javascript html

Javascript HTML表单操作搜索，一个文本框，两个按钮，两个可能的结果,javascript,html,Javascript,Html,这几天我在尝试做一个搜索表单，它用两个不同的按钮和一个文本框发送到两个不同的页面。到目前为止，我正在这样做： <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="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>
当然，结果是：

我可以这样做，但我想让它变得更“可爱”：

到目前为止，我已经尝试过使用脚本，但我没有得到它，所以我刮了它，然后我尝试了制作一个
if
/
elseif
，但再次，我不确定我在做什么，我不是一个很好的计划者，我看到的东西，切换按钮或dropbox没有那么快，因为我只需要按tab键一两次，然后按enter键，就可以搜索到我想要的地方

另外，我正在为chrome制作我的个人“新标签”，因为基本标签和我在扩展中找到的标签对于我的迷你笔记本电脑来说都很重。

在
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>
在
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>
既然您尝试了一个脚本，但失败了，那么让我们看看实现这一点的方法

使用
表单
对你在这里做的事要格外小心。使用
form
发送
get
请求很容易，但它总是“刷新”操作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>
既然您尝试了一个脚本，但失败了，那么让我们看看实现这一点的方法

使用
表单
对你在这里做的事要格外小心。使用
form
发送
get
请求很容易，但它总是“刷新”操作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>
使用javascript将按钮链接到url并向其传递数据。您还应该使用
post
请求而不是
get
发送查询。使用javascript将按钮链接到url并向其传递数据。你也应该使用
post
request和not
get
来发送查询。只有两个按钮，不知道如何使用，我会看到。编辑-我也添加了一个文本输入。把这段代码放在某个html文件中，然后双击该文件。嗯，我以前也尝试过这样做，但没有成功，我注意到我没有把它做成表单，谢谢。编辑：我注意到这两个按钮仍然使用“search_query”，而youtube确实起作用，torrentz只使用了一个“q”，所以它在那里不起作用，所以仍然是一半。只是两个按钮，不确定如何使用，然后，我会看到。编辑-我也添加了一个文本输入。把这段代码放在某个html文件中，然后双击该文件。嗯，我以前也尝试过这样做，但没有成功，我注意到我没有把它做成表单，谢谢。编辑：我注意到两个按钮仍然使用“search_query”，而youtube确实有效，torrentz只使用了一个“q”，因此它在那里不起作用，所以仍然是半途而废。按钮什么也没做，可能遗漏了什么。@manuelvillarroel谢谢你让我知道！我已经更新了答案。如果这有帮助，请告诉我。按钮没有任何作用，可能丢失了一些东西。@Manuelvillaroel谢谢你让我知道！我已经更新了答案。让我知道这是否有用。