javascript - 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>

表单 1:提交文本和按钮

表格 2:提交文本

表格 3:提交文本

表格 4:提交两次。 1) 提交文本 2) 提交文本和按钮

从表面上看，使用 HTML 表单提交发送文本和按钮输入。但使用 JavaScript 提交表单仅发送文本输入。没有按钮。

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

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

感谢您的帮助。

Answer 1

表格 1:提交文本和按钮 ..默认行为，使用输入类型提交 因为您单击了提交按钮，所以两个输入控件都会被提交。 添加另一个提交按钮。您将看到发布数据中仅包含调度提交的按钮。

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

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

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

其他行为与 Fomr 2 和 3 的描述类似 .

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