Html 如何让“div”按钮提交其所在的表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2400482/
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
How do i make a "div" button submit the form its sitting in?
提问by Jimbo
I have ASP.Net code generating my button's HTML for me using divs to get it to look and behave how I want. This question is regarding the HTML producedby the ASP.Net code.
我有 ASP.Net 代码，使用 div 为我生成按钮的 HTML 以使其外观和行为符合我的要求。这个问题是关于ASP.Net 代码生成的HTML。
A standard button is easy, just set the onClick event of the div to change the page location:
一个标准的按钮很简单，只需设置div的onClick事件来改变页面位置：
<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>
This works great, however, if I want a button like this to submit the form in which it resides, I would have imagined something like below:
这很好用，但是，如果我想要一个这样的按钮来提交它所在的表单，我会想象如下：
<form action="whatever.html" method="post">
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
Button Text
</div>
</form>
However, that does not work :( Does anyone have any sparkling ideas?
但是，这不起作用:( 有没有人有任何闪亮的想法？
回答by Andy E
Are you aware of <button>elements? <button>elements can be styled just like <div>elements and can have type="submit"so they submit the form without javascript:
你了解<button>元素吗？ <button>元素可以像<div>元素一样设置样式，并且可以type="submit"在没有 javascript 的情况下提交表单：
<form action="whatever.html" method="post">
<button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">
Button Text
</button>
</form>
Using a <button>is also more semantic, whereas <div>is very generic. You get the following benefits for free:
使用 a<button>也更具语义，而<div>非常通用。您可以免费获得以下好处：
- JavaScript is not necessary to submit the form
- Accessibility tools, e.g. screen readers, will (correctly) treat it as a button and not part of the normal text flow
<button type="submit">becomes a "default" button, which means the return key will automatically submit the form. You can't do this with a<div>, you'd have to add a separate keydownhandler to the<form>element.
- 提交表单不需要 JavaScript
- 辅助功能工具，例如屏幕阅读器，将（正确地）将其视为按钮而不是正常文本流的一部分
<button type="submit">成为“默认”按钮，这意味着返回键将自动提交表单。你不能用 a 来做到这一点<div>，你必须向元素添加一个单独的keydown处理程序<form>。
There's one (non-) caveat: a <button>can only have phrasing content, though it's unlikely anyone would need any other type of content when using the element to submit a form.
有一个（非）警告： a<button>只能有phrasing content，尽管在使用该元素提交表单时，任何人都不太可能需要任何其他类型的内容。
回答by YOU
onClick="javascript:this.form.submit();">
thisin div onclick don't have attribute form, you may try this.parentNode.submit()or document.forms[0].submit()will do
this在 div onclick 中没有属性form，您可以尝试this.parentNode.submit()或document.forms[0].submit()将这样做
Also, onClick, should be onclick, some browsers don't work with onClick
此外，onClick应该是onclick，某些浏览器不支持onClick
回答by R Tobin
To keep the scripting in one place rather than using onClick in the HTML tag, add the following code to your script block:
要将脚本保存在一处而不是在 HTML 标记中使用 onClick，请将以下代码添加到您的脚本块中：
$('#id-of-the-button').click(function() {document.forms[0].submit()});
Which assumes you just have the one form on the page.
假设您在页面上只有一个表单。
回答by Zhaph - Ben Duguid
A couple of things to note:
有几点需要注意：
- Non-JavaScript enabled clients won't be able to submit your form
- The w3c specification does not allow nested forms in HTML - you'll potentially find that the action and method tags are ignored for this form in modern browsers, and that other ASP.NET controls no longer post-back correctly (as their form has been closed).
- 未启用 JavaScript 的客户端将无法提交您的表单
- w3c 规范不允许 HTML 中的嵌套表单 - 您可能会发现在现代浏览器中此表单的操作和方法标记被忽略，并且其他 ASP.NET 控件不再正确回发（因为它们的表单已关闭）。
If you want it to be treated as a proper ASP.NET postback, you can call the methods supplied by the framework, namely __doPostBack(eventTarget, eventArgument):
如果您希望将其视为适当的 ASP.NET 回发，则可以调用框架提供的方法，即__doPostBack(eventTarget, eventArgument)：
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
Button Text
</div>
回答by DarkLotus
Why does everyone have to complicate things. Just use jQuery!
为什么每个人都要把事情复杂化。只需使用jQuery！
<script type="text/javascript">
$(document).ready(function() {
$('#divID').click(function(){
$('#formID').submit();
)};
$('#submitID').hide();
)};
</script>
<form name="whatever" method="post" action="somefile.php" id="formID">
<input type="hidden" name="test" value="somevalue" />
<input type="submit" name="submit" value="Submit" id="submitID" />
</form>
<div id="divID">Click Me to Submit</div>
The div doesn't even have to be in the form to submit it. The only thing that is missing here is the include of jquery.js.
div 甚至不必在表单中提交。这里唯一缺少的是 jquery.js 的包含。
Also, there is a Submit button that is hidden by jQuery, so if a non compatible browser is used, the submit button will show and allow the user to submit the form.
此外，还有一个被 jQuery 隐藏的提交按钮，因此如果使用不兼容的浏览器，提交按钮将显示并允许用户提交表单。
回答by remi bourgarel
You have the button tag
你有按钮标签
http://www.w3schools.com/tags/tag_button.asp
http://www.w3schools.com/tags/tag_button.asp
<button>What ever you want</button>
<button>你想要什么</button>
