Javascript html 按钮与 html 提交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1979363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html button v.s. html submit?
提问by George2
I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
我有一个输入文本框和一个搜索提交按钮，当用户单击搜索提交按钮时，我想将用户重定向到 url http://testsearch/results.aspx?k=<value of text box k>，例如，如果用户将“StackOverflow”放入文本框中然后单击搜索按钮，我想将用户重定向到以下页面，
http://testsearch/results.aspx?k=StackOverflow
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
我发现当我使用按钮作为搜索按钮时，它可以工作（见下面的源代码），
<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;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
但是当我使用提交搜索按钮时，它不起作用（见下面的源代码），为什么？
<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;"/>
thanks in advance, George
提前致谢，乔治
采纳答案by Sarfraz
You can even use the submit button this way:
您甚至可以这样使用提交按钮：
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
语义提交按钮用于提交表单而不是重定向页面。您应该为此使用普通按钮类型。但是，正如我所展示的，您也可以使用提交按钮，但我认为这不是语义。
The below line prevents the form from being submitted.
以下行阻止提交表单。
return false;
That is what you are missing in your code :)
这就是您的代码中缺少的内容:)
Thanks
谢谢
回答by Harmen
<button>-elementsand <input type="button"/>don't do anything by default, unless you tell them to do something with Javascript.
<button>-elements并且<input type="button"/>默认情况下不会做任何事情，除非你告诉他们做什么的Javascript。
<input type="submit"/>will submit the form it is in.
<input type="submit"/>将提交它所在的表格。
So, if <input type="submit"/>won't work, you got it probably not in the <form/>-elementitself.
所以，如果<input type="submit"/>不起作用，你可能不会得到它<form/>-element本身。
回答by Asaf R
If that's the only field in your form, simply set the form's method to "get" and it'll work.
如果这是表单中唯一的字段，只需将表单的方法设置为“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>
回答by helios
<button>means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
<button>意思是“在页面中放置一个按钮并执行 onclick 事件所说的任何操作”。因此，如果您不编写 onclick 处理程序，则页面不会执行任何操作。
If you use submit is ok, because you want to redirect to another page.
如果你使用 submit 就可以了，因为你想重定向到另一个页面。
If you want to use button anyway you can do this way:
如果你想使用按钮，你可以这样做：
<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>
Warning: submit button with onclick
警告：使用 onclick 提交按钮
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
如果您有一个带有 onclick 事件的提交按钮（在表单内，它是一个有效的提交按钮），一些浏览器将：
1) execute onclick
1）执行onclick
2) execute submit
2）执行提交
your onclick tries to redirect but the submit button wins.
您的 onclick 尝试重定向，但提交按钮获胜。
If you want to avoid it you have some options:
如果你想避免它，你有一些选择：
a) change submit button to normal button
a) 将提交按钮更改为普通按钮
b) avoid the submit thing (add onsubmit="return false;" to form element)
b) 避免提交事情（添加 onsubmit="return false;" 到表单元素）
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).
c) 使用提交过程（form action="..." method="get", no onclick 事件），浏览器会很高兴，您可以在 onsubmit 事件中控制提交（您可以取消或不取消）。
回答by Pim Jager
make sure you got the input's in a form tag with a GET method:
确保使用 GET 方法在表单标签中获取输入：
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>
回答by Evan
If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.
如果我理解正确，它就不起作用，因为它不在表单标签中。如果你把它放在一个带有 method="get" 的表单标签中，它应该可以工作。该按钮之所以起作用，是因为它不必在表单中。
