html button v.s. html提交？

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

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;"/>

但是当我使用提交搜索按钮，它不起作用（见下面s为什么？）

<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;"/>

由于事先乔治

来源

2009-12-30 George2

这两个代码示例似乎都是相同的 – naivists 2009-12-30 10:07:14

我不明白“按钮”的情况如何工作，如果您不在onclick事件中放置任何代码。这是完整的例子吗？ – helios 2009-12-30 10:13:48

纠正我的示例，谢谢！ – George2 2009-12-30 10:23:47

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

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

语义提交按钮来提交表单不重定向页面。你应该使用正常的按钮类型。但是，正如我所示，你也可以使用提交按钮，但这不是我想的语义。

下面的行禁止提交表单。

return false;

这就是你缺少你的代码是什么:)

感谢

来源

2009-12-30 10:04:32 Sarfraz

为什么提交不符合我的情况？我想知道浏览器如何处理按钮处理的不同提交，以便它使提交在我的方案中不起作用？ – George2 2009-12-30 10:07:25

你需要把返回false;声明在提交按钮的onlcick事件结束时，以便它不提交，而是执行onclick事件中告知的操作。 – Sarfraz 2009-12-30 10:08:51

对不起，我忘了在我的代码中添加onclick事件。刚刚纠正。在我的情况下提交和按钮有什么区别，为什么提交不起作用？在我原来的代码中，没有Form元素。 – George2 2009-12-30 10:28:23

<button>-elements和<input type="button"/>默认情况下不会做任何事情，除非你告诉他们做什么用的JavaScript。

<input type="submit"/>将提交它的形式。

所以，如果<input type="submit"/>将无法正常工作，您在<form/>-element本身得到它可能不是。

来源

2009-12-30 10:09:28 Harmen

对不起，我忘了在我的代码中添加onclick事件。刚刚纠正。在我的情况下提交和按钮有什么区别，为什么提交不起作用？在我原来的代码中，没有Form元素。 – George2 2009-12-30 10:29:28

要使提交按钮有效，我们必须将其包含在表单中？ – George2 2009-12-31 06:49:39

是的，在'

' – Harmen 2009-12-31 09:54:30

<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）execu te提交

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

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

一）改变提交按钮和普通的按钮

B）避免了提交的东西（添加的onsubmit =“返回false;”形成元素）

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

来源

2009-12-30 10:09:40 helios

中包装''元素对不起，我忘了在我的代码中添加onclick事件。刚刚纠正。在我的情况下提交和按钮有什么区别，为什么提交不起作用？在我原来的代码中，没有Form元素。 – George2 2009-12-30 10:28:56

我添加了一个非常重要的警告（我前段时间调试过类似的情况）。我认为它回答了这个问题。 – helios 2009-12-30 10:36:17

如果用户通过在文本字段中输入提交表单，提交按钮的onclick事件也不会被触发。 – robertc 2009-12-30 11:07:00

如果这是您窗体中唯一的字段，只需将窗体的方法设置为“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>

来源

2009-12-30 10:10:09

对不起，我忘了添加我的代码中的onclick事件。刚刚更正。在我的情况下提交和按钮之间有什么区别，为什么提交不起作用？在我的原始代码中，没有Form元素。 – George2 2009-12-30 10:26:45

如果你想用JavaScript来做，我会建议看@Sarfraz艾哈迈德的回答。但是，除非你有充足的理由在那里使用JavaScript，否则我会选择纯HTML（例如在我的回答中）。 – 2009-12-30 10:31:59

要使提交按钮起作用，我们必须将其包含在表单中？ – George2 2009-12-31 06:50:14

确保你有一个表单标签的输入与一个GET方法：

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

来源

2009-12-30 10:12:35

对不起，我忘了在我的代码中添加onclick事件。刚刚纠正。在我的情况下提交和按钮有什么区别，为什么提交不起作用？在我原来的情况下，没有表单元素。 – George2 2009-12-30 10:27:50

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

来源

2009-12-30 10:12:55

对不起，我忘了在我的代码中添加onclick事件。刚刚纠正。在我的情况下提交和按钮有什么区别，为什么提交不起作用？在我原来的代码中，没有Form元素。 – George2 2009-12-30 10:27:19

html button v.s. html提交？

回答

相关问题