javascript - 使用 JavaScript 手动提交表单不会发送提交按钮

Question

我有一个有两个提交按钮的表单。我想使用 JavaScript 手动提交表单，并将用于提交表单的输入按钮与其他表单元素一起发布，就像自动提交表单一样。关于这个问题有很多讨论，但我找不到答案。

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/>
    <input type="text" size="20" id="field2" name="field2"/>

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form> 

当使用“Do One”按钮提交上面的表单时，发布的参数是field1="xxx"、field2="yyy"、 sub1_name="做一个".

但是我想手动提交表单...

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/>
    <input type="text" size="20" id="field2" name="field2"/>

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form> 
<script type="text/javascript">
    var btn = document.getElementById('sub1_id');
    btn.onclick=function() {
        return mySubmit(document.getElementById('form1'), ...);
    }
</script>

但是在 mySubmit 函数中手动提交表单不会发布 sub1_name 参数。我可以理解 - 我已经绕过了提交，所以表单不是使用按钮提交的，因此发布一个代表用于提交表单的按钮的参数是没有意义的。

当我查看 onclick 处理程序中的表单元素时，我可以看到两个按钮。我对此也并不过分惊讶，毕竟它们是表单上的元素，但我没有得到的是，如果我在我的 onclick 处理程序中添加一个元素，那么我添加的元素是已发布，并且未发布两个原始提交按钮。为了完成图片，这里是添加元素的代码:

<script type="text/javascript">
    var btn = document.getElementById('sub1_id');
    btn.onclick=function() {
        var f = document.getElementById('form1');
        var s = document.createElement("input");
        s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";            
        f.appendChild(s);

        // s gets posted
        return mySubmit(f, ...);
    }
</script>

添加输入元素可能对我有用，但我很困惑浏览器如何知道发布我添加的元素而不是原始的两个输入元素。

谢谢。

Answer 1

specification表示提交表单的第一步是:

Step one: Identify the successful controls

“成功的控制”定义为:

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

However:

...

• If a form contains more than one submit button, only the activated submit button is successful.

由于没有激活任何提交按钮，因此不会发送任何内容。另一方面，隐藏的输入元素是有效的，只会被一起提交。请注意，您在 调用 mySubmit() 之前添加了隐藏元素，因此在执行上述步骤时(即在提交期间)，隐藏元素只是另一个成功的控件表单的一部分，并因此发送。