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

Posted 2023-02-22

【中文标题】使用 JavaScript 手动提交表单不会发送提交按钮

【英文标题】：Manually submitting a form using JavaScript doesn't send the submit button

【发布时间】：2012-01-24 10:04:48

【问题描述】：

我有一个有两个提交按钮的表单。我想使用 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="Do One"。

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

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

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

谢谢。

【问题讨论】：

f 只是一个指向表单的指针，因此更新会继续。您只需捕获触发您的功能的按钮并将其放入元素中。您为什么还要担心添加自定义提交？我认为您可以尝试添加一个返回 true 或 false 的 onclick 方法，从而决定天气或不通过默认方法提交数据，并且只是为了您在那里签到并将实际提交给浏览器。希望这有效，至少对于它的超链接有效。

mySubmit 到底是做什么的？有什么原因您不能使用表单的onsubmit 并在完成脚本中需要执行的所有操作后让表单正常提交？

【参考方案1】：

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

第一步：确定成功的控制

“成功控制”定义为：

成功的控件对于提交是“有效的”。每个成功的控件都将其控件名称与其当前值配对，作为提交的表单数据集的一部分。成功的控件必须在 FORM 元素中定义，并且必须具有控件名称。

但是：

...

如果一个表单包含多个提交按钮，只有激活的提交按钮是成功的。

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

【参考方案2】：

可以使用

var btn = document.getElementById('sub1_id');
btn.onsubmit=function() 
   return false;


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);

    f.submit()