如何使“div”按钮提交其所在的表单？

Posted 2023-03-05

【中文标题】如何使“div”按钮提交其所在的表单？

【英文标题】：How do I make a "div" button submit the form its sitting in?

【发布时间】：2011-01-24 22:07:46

【问题描述】：

我有 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>

但是，这不起作用:(有没有人有任何闪闪发光的想法？

【问题讨论】：

您不应该将 div 用于自定义样式按钮。请改用<button> 元素。同样，如果禁用脚本的浏览器没有回退，则不应使用 javascript 提交表单。

@AndyE 使用 div 提供了比按钮更多的样式选项。例如，我不能将 div 放在按钮中；但我可以在 div 中放置一个 div。这让我可以更好地控制外观。

@nueverest div 不提供比按钮更多的样式选项。 div 只是一个通用的块级元素。通过设置按钮的border、background-color 和display 属性，可以以完全相同的方式设置按钮的样式。同样，按钮内的任何元素都可以设置为类似于 div 的样式（例如，带有display: block 的跨度）。话虽如此，如今可访问性提示可以使 div 被识别为按钮，因此只要您记得让您的网站可访问，这并不重要。

【参考方案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> 则非常通用。您可以免费获得以下好处：

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

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

【讨论】：

这是最明智的解决方案。

这不是重点，他想用 div 来做，因此明确询问是否有 div 的解决方案，否则他只会使用带有 type=submit 属性或 的

@Ryuji：为什么不重要？他不会使用<input>，因为它们没有<div> 那么多的灵活性。 <button> 具有<div> 所具有的大部分灵活性，并且是更适合该工作的工具。您是否想到 OP 或查看此问题的任何人可能不知道 <button> 元素？

@Blauhirn：样式与语义 html 无关。使用 HTML 语义化只是意味着使用最合适的工具来完成这项工作。使用<button> 元素，您可以免费获得可访问性和可读性。如果我用 div 查看您的代码，我会知道它是一个按钮吗？屏幕阅读器会知道这是一个按钮吗？这些问题的答案可能是也可能不是“是”，这取决于它写得有多好。不过，您可能已经在为您的 div 设置样式以使其看起来像一个按钮，那么有几个额外的指令可以“重置”按钮的外观？

@wdetac 接受的答案包含该信息，并且它被粘贴在所有答案的顶部。将其包含在我自己的答案中将是多余的，如果我的答案不在这里，那么很多人将（错误地）使用<div> 元素来提交表单。

【参考方案2】：

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

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

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

【参考方案3】：

为什么每个人都必须把事情复杂化。只需使用 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 元素提交父表单（如已接受的答案所示）由一个非常简单的非 JQuery “this.parentNode.submit()” - 无论如何谢谢。

【参考方案4】：

有几点需要注意：

未启用 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>

【参考方案5】：

你有按钮标签

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

随心所欲

【参考方案6】：

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

this in div onclick 没有属性form，你可以试试this.parentNode.submit() 或document.forms[0].submit() 就可以了

另外，onClick，应该是onclick，有些浏览器不支持onClick

【讨论】：

如果您有多个表单，并且您的表单不是 DOM 中的第一个表单，则不会产生预期的效果。更安全的是（如果您要使用 javascript 提交表单）是给它一个唯一 id，然后通过唯一 id 获取它的一个实例，然后提交： document.getElementById('theForm' ).submit();

如果您使用键盘（制表符并回车）在页面中导航或使用中键单击或 ctrl + 单击，则不起作用。在我看来，最好设计一个真正的按钮。