Question

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

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

formElement.submit()

除了一件事，这一切都很好。表单的字段可用作formElement的属性，因此如果有一个字段包含名称或 id “text1”，则可以将其作为{{ 1}}。

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

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

formElement.submit

以下内容可行。唯一的区别是我从表单中删除了“提交”这个名称：

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

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

Answer 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)以原始格式执行它。

Answer 2

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

更新：接受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();

Answer 3

在Firefox中

formElement.constructor

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

HTMLFormElement.prototype.submit.call(formElement)

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

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

Answer 4

最好的办法是不要将提交按钮命名为“提交”，但你可以绕过它 -

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

Answer 5

使用JavaScript 提交表单无法设计为安全。

您的用户可以通过手机浏览您的网站，停用JavaScript，调整网页来源或使用Lynx。

在任何情况下，出于辅助功能的目的，您需要在服务器端使用旧的HTML提交按钮和一些输入检查。

Answer 6

对于名为submit的表单，只需调用其按钮，单击功能就可以为我工作。

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

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

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

7 个答案: