如何让"div"按钮提交其所在的表格？

Question

我有ASP.Net代码为我生成我的按钮的HTML使用div来让它看起来和表现我想要的方式.这个问题是关于ASP.Net代码生成的HTML.

标准按钮很简单,只需设置div的onClick事件即可更改页面位置:

<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>

这很好用,但是,如果我想要一个这样的按钮来提交它所在的表单,我会想象如下:

<form action="whatever.html" method="post">
    <div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
    Button Text
    </div>
</form>

然而,这不起作用:(有没有人有任何闪亮的想法？

Answer 1

你知道<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>  

使用a <button>也更具语义,而<div>非常通用.您可以免费获得以下福利:

• 提交表单不需要JavaScript
• 辅助工具(例如屏幕阅读器)将(正确地)将其视为按钮而不是正常文本流的一部分
• <button type="submit">成为"默认"按钮,这意味着返回键将自动提交表单.你不能用a来做<div>,你必须为元素添加一个单独的keydown处理程序<form>.

有一个(非)警告:a <button>只能有短语内容,但在使用该元素提交表单时,任何人都不太可能需要任何其他类型的内容.

Answer 2

onClick="javascript:this.form.submit();">

this在div onclick没有属性form,你可以尝试this.parentNode.submit()或document.forms[0].submit()将要做

此外,onClick应该是onclick,某些浏览器不能使用onClick

Answer 3

要将脚本保存在一处而不是在 HTML 标记中使用 onClick，请将以下代码添加到您的脚本块中：

$('#id-of-the-button').click(function() {document.forms[0].submit()});

假设您在页面上只有一个表单。