html 按钮与html提交？答案

【问题标题】：html button v.s. html submit?html 按钮与html提交？
【发布时间】：2009-12-30 10:01:24
【问题描述】：

我有一个输入文本框和一个搜索提交按钮，当用户单击搜索提交按钮时，我想将用户重定向到 url 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;"/>

提前致谢，乔治

【问题讨论】：

两个代码示例似乎相等
如果您不将任何代码放在其 onclick 事件中，我不明白“按钮”案例是如何工作的。是完整的例子吗？
对不起，我忘记添加 onclick 事件，刚刚更正了我的帖子。有什么想法吗？
您的提交按钮没有做任何事情，很可能是因为它没有包含在表单元素中
要使提交按钮起作用，我们必须将其包含在表单中？

标签： javascript html

【解决方案1】：

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

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

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

以下行阻止提交表单。

return false;

这就是您的代码中缺少的内容 :)

谢谢

【讨论】：

为什么提交在我的场景中不起作用？我想知道浏览器处理提交的方式与处理按钮的方式不同，从而使提交在我的场景中不起作用？
你需要把return false;在提交按钮的 onlcick 事件结束时声明，使其不提交，而是执行 onclick 事件中告知的操作。
对不起，我忘记在我的代码中添加 onclick 事件。刚刚更正。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始代码中，没有 Form 元素。
提交按钮可用于提交表单（您知道表单是带有
标签的表单），而普通按钮可用于执行一些javascript代码。在你的情况下，如果你想重定向页面，你应该使用普通按钮。 :)
@George：是的，您需要将它们放入表单中

【解决方案2】：

<button>-elements 和 <input type="button"/> 默认不做任何事情，除非你告诉他们用 Javascript 做一些事情。

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

因此，如果 <input type="submit"/> 不起作用，您可能不会在 <form/>-element 本身中得到它。

【讨论】：

对不起，我忘记在我的代码中添加 onclick 事件。刚刚更正。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始代码中，没有 Form 元素。
是的，将<input/>-元素包裹在<form action="result.aspx" method="get"> </form>中

【解决方案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>

【讨论】：

对不起，我忘记在我的代码中添加 onclick 事件。刚刚更正。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始代码中，没有 Form 元素。
如果你想用 JavaScript 来做，我建议你看看@Sarfraz Ahmed 的答案。但是，除非您有充分的理由在那里使用 JavaScript，否则我会选择纯 HTML（例如在我的回答中）。
据我所知-是的，您必须将其包含在表格中（至少可以说-这是规范）

【解决方案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 事件的提交按钮（在表单内，它是一个有效的提交按钮），一些浏览器会：

1) 执行点击

2) 执行提交

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

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

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

b) 避免提交事情（添加 onsubmit="return false;" 到表单元素）

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

【讨论】：

对不起，我忘记在我的代码中添加 onclick 事件。刚刚更正。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始代码中，没有 Form 元素。
我添加了一个非常重要的警告（我前段时间调试过类似的情况）。我认为它回答了这个问题。
如果用户通过在文本字段中按回车键提交表单，提交按钮的 onclick 事件也不会被触发。
事实上，这是在提交按钮和普通按钮之间进行选择的好标准（“我想通过表单内的 Enter 键发送查询吗？”）
是的。因为提交意味着“使用
（GET 或 POST）中指示的方法向

中指示的 URL 发送请求，并包含表单的所有数据. 你可以在一个页面中有多个表单, 每个表单都有它的提交按钮和它的数据. 注意: 如果你想使用一个提交按钮作为一个普通按钮, 你可以 (它有 onclick 事件) 但你应该使用代替。

【解决方案5】：

确保您使用 GET 方法在表单标签中获得输入：

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

【讨论】：

对不起，我忘记在我的代码中添加 onclick 事件。刚刚更正。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我原来的情况下，没有表单元素。

【解决方案6】：

如果我理解正确的话，它是行不通的，因为它不在表单标签中。如果你把它放在一个带有 method="get" 的表单标签中，它应该可以工作。该按钮有效，因为它不必在表单中。

【讨论】：

对不起，我忘记在我的代码中添加 onclick 事件。刚刚更正。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始代码中，没有 Form 元素。