如何使用 JavaScript 可靠地提交 HTML 表单？答案

【问题标题】：How to reliably submit an HTML form with JavaScript?如何使用 JavaScript 可靠地提交 HTML 表单？
【发布时间】：2010-01-04 14:35:30
【问题描述】：

有没有办法使用JavaScript 提交 HTML 表单，保证在所有情况下都有效？

我详细说明。常见的做法似乎是：

formElement.submit()

这一切都很好，除了一件事。表单的字段可作为formElement 的属性使用，因此如果有一个带有name 或id "text1" 的字段，则可以将其作为formElement.text1 访问。

这意味着如果一个元素被称为“提交”（无论是它的name还是它的id），那么formElement.submit() 将不起作用。这是因为formElement.submit 不是表单的方法，而是具有该名称的字段。不幸的是，提交按钮具有“提交”名称或 ID 是相当普遍的。

两个例子来说明我的观点。首先，以下内容将不起作用，因为表单元素的名称为“submit”：

<form name="example" id="example" action="/">
  <button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>

以下将起作用。唯一的区别是我从表单中删除了“提交”的名称：

<form name="example" id="example" action="/">
  <button type="button" onclick="document.example.submit(); return false;">Submit</button>
</form>

那么，还有其他方法可以使用 JavaScript 提交 HTML 表单吗？

【问题讨论】：

很烦人......我遇到了同样的问题，表单的“长度”属性（控件的数量）被替换为名为“长度”的控件的值。最后我更改了控件的名称。
见stackoverflow.com/questions/876243/…
如果我建议给它换个名字，我是不是很愚蠢..？例如。 "action" 或 "run".
@BalusC：对于特定站点中的单个脚本，更改名称确实就足够了。但是，如果您想构建一个库以在多个站点中使用，则需要提供最一般的情况。更改名称不是一个选项。
很好地解释了为什么 form.submit() 可能不起作用；解决了我的问题！

标签： javascript html forms

【解决方案1】：

在 JavaScript 中创建另一个表单，并将其 submit() 方法应用于您的原始表单：

<html>
    <script>
        function hack() {
            var form = document.createElement("form");
            var myForm = document.example;
            form.submit.apply(myForm);
        }
    </script>

    <form name="example" id="example" method="get" action="">
        <input type="hidden" value="43" name="hid">
        <button 
          type="button" 
          name="submit" 
          onclick="hack();return false;"
        >Submit</button>
    </form>
</html>

form.submit 是引用了一个新鲜干净的提交方法，然后你用apply(myForm) 用原始表单执行它。

【讨论】：

【解决方案2】：

那么，还有其他方法可以使用 JavaScript 提交 HTML 表单吗？

更新：听取 Jerome 的建议（在此线程的其他地方）。出于历史兴趣，我将保留此答案，但它不如 Jerome 的解决方案好或可靠。

以下方法很丑陋，但有效。

    var x = document.forms.example;
    var f = document.createElement('form');
    f.action = x.action;
    f.method = x.method;
    f.enctype = x.enctype;
    for (var i = 0; i < x.elements.length; i++) {
        var el = x.elements[i];
        if (el.name !== "submit") {
            f.appendChild(el);
        }
    }
    x.parentNode.replaceChild(f,x);
    f.submit();

【讨论】：

【解决方案3】：

最好不要将提交按钮命名为“提交”，但您可以绕过它-

function reallysubmitform(n){
 n= n || 0;
 var f= document.forms[n];
 f.onsubmit= function(){
  return true
 };
 var sub= f.elements['submit'];
 if(sub && sub.type== 'submit') sub.click();
 else f.submit();
}

reallysubmitform()

【讨论】：

它确实解决了我的一个问题，即使我的文件中有表单 HTML，我也无法更改提交按钮的名称，因为我必须在外部服务器上提交并且他们进行了检查on 提交的表单是否包含 SUBMIT 元素。

【解决方案4】：

在火狐中

formElement.constructor

返回“HTMLFormElement”。因此，您可以使用以下方式提交表单：

HTMLFormElement.prototype.submit.call(formElement)

您也可以将其扩展到其他浏览器：

formElement.constructor.prototype.submit.call(formElement)

【讨论】：

然而，并非所有浏览器都会在表单元素（或任何其他宿主对象）上公开constructor。
显然这不是跨浏览器

【解决方案5】：

使用 JavaScript 提交表单设计上并不安全。

您的用户可以在他们的手机上浏览您的网站、禁用 JavaScript、调整您的页面源或使用Lynx。

无论如何，出于可访问性目的，您将需要良好的旧 HTML 提交按钮和服务器端的一些输入检查。

【讨论】：

当然可以，但是仍然可以添加合理的增强功能以利用这些功能。至于“安全”，我不是要求它：我想要的是可靠性，以稳定的界面形式

【解决方案6】：

对于一个名为 submit 的表单，只需调用它的按钮 click 函数就可以了。

document.forms[0].submit.click();  //where submit here is just the name of the button/input tied to the form.

【讨论】：

我最初问这个问题的时候，是在开发一个JS库。我不得不尽可能少地假设环境。因此，这个解决方案对我不起作用，因为我不得不假设用户会使用正确的标记。

【解决方案7】：

只需使用 onsubmit ...

<form name="example" id="example" action="/" onsubmit="document.example.submit();">
  <button type="submit" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>

【讨论】：