HTML 表单提交 POSTS 输入按钮/提交值； JavaScript 表单提交不

Question

所以这一直困扰着我一段时间。我发现一个页面间歇性地提交了两次表单内容。为简化起见，输入是一个文本字段和一个按钮。经过进一步检查，我注意到一个表单提交包括文本和按钮输入，而另一个提交只发送文本输入。

我设置了一个测试页面来进行故障排除。我把它放在 jsfiddle 上，但我认为它不会有太大帮助，因为我看不到使用 HTTP 代理工具（如 Fiddler）传递的值。

https://jsfiddle.net/9xL5w9t2/

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form1" name="form1name">
<input type="submit" value="submit form" id="submitbtn1" name="submitbtn1name" />
<input type="text" id="text1" value="123" name="text1name" />
</form>

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form2" name="form2name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form2name.submit();" id="submitbtn2" name="submitbtn2name" />
<input type="text" id="text2" value="123" name="text2name" />
</form>

<form method="post" action="www.google.com" id="form3" name="form3name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form3name.submit();" id="submitbtn3" name="submitbtn3name" />
<input type="text" id="text3" value="123" name="text3name" />
</form>

<form method="post" action="www.google.com" onsubmit="alert('form submitted'); this.submit();" id="form4" name="form4name">
<input type="submit" value="submit form" id="submitbtn4" name="submitbtn4name" />
<input type="text" id="text4" value="123" name="text4name" />
</form>

表格一：提交文字和按钮

表格2：提交文字

表格3：提交文字

Form 4：提交两次。 1) 提交文本 2) 提交文本和按钮

从外观上看，使用 HTML 表单提交通过文本和按钮输入进行提交。但是使用 JavaScript 提交表单只发送文本输入。没有按钮。

这种行为的解释是什么？为什么 JavaScript 表单提交只通过文本输入发送，而 HTML 表单提交通过文本和按钮输入发送？

这是设计使然吗？如果是这样，原因是什么？让您的 HTML 解析器发送按钮值似乎不一致，但您的 JS 引擎却没有。

感谢您的帮助。

Answer 1

Form 1：提交文本和按钮 .. 默认行为，使用输入类型提交 两个输入控件都被提交，因为您单击了提交按钮。 添加另一个提交按钮。您将看到只有发送提交的按钮包含在发布数据中。

所以.. 这是什么原因：这样你可以添加两个按钮，例如“取消”和“保存”到使用相同名称的表单

表格2：提交文本 表格 3：提交文本 ..这两种解决方案对我来说看起来完全一样，输入类型按钮在这里没有作为“提交输入字段”处理..您使用js提交。 按钮上没有任何操作，这就是它不包括在内的原因。 （如上所述）。

Form 4：提交两次。 1) 提交文本 2) 提交文本和按钮 您正在使用表单 1 中的输入类型提交，因此该表单的提交方式完全相同。但是：表单上还有一个 onsubmit 处理程序，它使用 js 再次调用提交——这就是第二次提交的原因。 首先调用处理程序，因为提交将触发页面重新加载，并且执行该事件的脚本在提交后将不会“出现”。

其他的行为就像对 Formr 2 & 3 的描述 .

如果您需要进一步解释，请告诉我。