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>

使用<button>也更具语义性，而<div>非常通用。您可以免费获得以下福利：

提交表单
辅助工具，例如屏幕阅读器，将（正确地）将其视为按钮而不是正常文本流的一部分
<button type="submit">成为“默认”按钮，这意味着返回键将自动提交表单。您无法使用<div>执行此操作，您必须为<form>元素添加单独的 keydown 处理程序。

有一个（非）警告：<button>只能有phrasing content，但在使用该元素提交表单时，任何人都不太可能需要任何其他类型的内容。

Answer 2

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

div onclick中的

this没有属性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()});

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

Answer 4

您有按钮标记

http://www.w3schools.com/tags/tag_button.asp

＆lt; button＆gt;你想要什么＆lt; / button＆gt;

Answer 5

有几点需要注意：

非启用JavaScript的客户端将无法提交您的表单
w3c规范不允许在HTML中嵌套表单 - 您可能会发现在现代浏览器中此表单会忽略操作和方法标记，并且其他ASP.NET控件不再正确地回发（因为它们表格已经关闭）。

如果您希望将其视为适当的ASP.NET回发，则可以调用框架提供的方法，即__doPostBack(eventTarget, eventArgument)：

<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
     onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
  Button Text
</div>

Answer 6

为什么每个人都必须使事情复杂化。只需使用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>

div甚至不必提交形式。这里唯一缺少的是jquery.js的包含。

此外，还有一个由jQuery隐藏的提交按钮，因此如果使用不兼容的浏览器，则会显示提交按钮并允许用户提交表单。

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

6 个答案: