Question

我有一个输入文本框和一个搜索提交按钮，当用户点击搜索提交按钮时，我想将用户重定向到网址http://testsearch/results.aspx?k=<value of text box k>，例如，如果用户将“StackOverflow”放入文本框并且然后单击搜索按钮，我想将用户重定向到以下页面，

http://testsearch/results.aspx?k=StackOverflow

我发现当我使用按钮搜索按钮时，它可以工作（参见下面的源代码），

  <input type="text" id="k" name="k" />
  <input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

但是当我使用“提交搜索”按钮时，它不起作用（参见下面的源代码），为什么？

  <input type="text" id="k" name="k" />
 <input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

提前谢谢，乔治

Answer 1

您甚至可以这样使用提交按钮：

 <input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />

语义提交按钮用于提交表单而非重定向页面。您应该使用普通按钮类型。然而，正如我所示，你也可以使用提交按钮，但我认为这不是语义。

以下行阻止提交表单。

return false;

这就是您在代码中遗漏的内容：）

由于

Answer 2

默认情况下，

<button>-elements和<input type="button"/>不会执行任何操作，除非您告诉他们使用Javascript执行某些操作。

<input type="submit"/>将提交其所在的表单。

所以，如果<input type="submit"/>不起作用，你可能不会在<form/>-element本身。

Answer 3

如果这是表单中唯一的字段，只需将表单的方法设置为“get”即可。

<html>
<body>
    <form action="http://localhost/mytest" method="get" >
        <input type="text" id="k" name="k" />
        <input type="submit" id="Go" value="Search" />
    </form>
</body>
</html>

Answer 4

<button>表示“在页面中放置一个按钮并执行onclick事件所说的任何操作”。因此，如果您不编写onclick处理程序，则页面不会执行任何操作。

如果你使用提交是好的，因为你想重定向到另一个页面。

如果你想使用按钮，你可以这样做：

<script>
function doTheSearch() {
  // do the submit mannually
  document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
 <input type="text" id="k" name="k" />
  <input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>

警告：使用onclick

提交按钮

如果你有一个带有onclick事件的提交按钮（在表单中，它是一个工作提交按钮），某些浏览器会：

1）执行onclick

2）执行提交

你的onclick尝试重定向，但提交按钮获胜。

如果你想避免它，你有一些选择：

a）将提交按钮更改为普通按钮

b）避免提交事物（添加onsubmit =“return false;”以形成元素）

c）使用提交程序（form action =“...”method =“get”，没有onclick事件），浏览器会很高兴你可以在onsubmit事件中控制提交（你可以取消它或者不是）。

Answer 5

确保您使用GET方法获取表单标记中的输入：

<form action='http://testsearch/results.aspx' method='GET'>
  ... inputs
</form>

Answer 6

如果我理解正确，它不起作用，因为它不在表单标签中。如果你把它放在一个form =“get”的表单标签中，它应该可以工作。该按钮有效，因为它不必是一种形式。

html按钮v.s. HTML提交？

6 个答案: