为什么在使用 HTMLFormElement.submit() 时，属性 type="submit" 的 <button> 不会与表单一起提交？答案

【问题标题】：Why would a <button>, with attribute type="submit", not be submitted with the form when using HTMLFormElement.submit()?为什么在使用 HTMLFormElement.submit() 时，属性 type="submit" 的 <button> 不会与表单一起提交？
【发布时间】：2021-12-30 16:34:51
【问题描述】：

我碰巧有以下表格：

<form method="post" action=<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?> enctype="multipart/form-data">
  <button type="submit" name="identifier" value="wikipedea_form">
    Add Post
  </button>
</form>

我使用 jquery 来提交这个表单

$("form").submit();

这不会发送帖子数据$_POST["identifier"]。我假设 jQuery 在后台使用 HTMLFormElement.submit()。 The MDN docs 这么说：

<input> 属性 type="submit" 在使用 HTMLFormElement.submit() 时不会与表单一起提交...

我认为这同样适用于button 标签。只是为了 100% 确定我在这里问。可能取决于浏览器等...

那么，在使用HTMLFormElement.submit() 时，带有type="submit" 属性的<button> 不会与表单一起提交吗？请引用官方文档来支持您的答案。

【问题讨论】：

您提交的是<form>元素，而不是按钮，提交按钮的值不会在请求中传递，因为您实际上并没有点击按钮
禁用的元素不会与表单一起提交。改用hidden 输入
未提交禁用控件
但是您的报价是专门针对HTMLFormElement 的，所以我可能没有正确理解您的问题
@AlonEitan 我已编辑问题以提交表单而不是按钮。才意识到你说的。

标签： javascript php html jquery forms

【解决方案1】：

只有成功的控件才会以正常的形式提交。

提交按钮只有在用于提交表单时才会成功（或者如果表单是在单个文本输入中通过 Enter 提交的，在这种情况下默认提交按钮是成功的）。这使您可以区分在以下情况下使用哪个按钮提交表单：

<button name="action" value="like">Like</button>
<button name="action" value="dislike">Dislike</button>

使用 JS 触发表单提交会绕过提交按钮的选择。

对于控件中的每个元素字段，按树形顺序排列：
1. 如果以下任何一项为真：
  - 字段元素有一个 datalist 元素祖先。
  - 字段元素被禁用。
  - 字段元素是按钮，但不是提交者。
  - field元素是一个input元素，其type属性为Checkbox状态，checkedness为false。
  - field元素是一个input元素，其type属性为Radio Button状态，且checkedness为false。
然后继续。

——https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set

如果你想在每次提交时都用表单提交数据，不管它是如何提交的：使用<input type="hidden" ...>

【讨论】：