代码之家 › 专栏 › 技术社区 › pablobm

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

forms html javascript

pablobm · 技术社区 · 16 年前

JavaScript 保证在所有情况下都能工作?

formElement.submit()

除了一件事,这一切都很好。表单的字段可作为的属性使用 formElement ,因此,如果存在具有名称或 身份证件 formElement.text1 .

这意味着,如果一个元素被称为“提交”(无论是它的或其 身份证件 )那么 formElement.submit() 这是行不通的。这是因为 formElement.submit

两个例子来说明我的观点。首先,以下操作不起作用,因为表单的一个元素名为“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表单?

7 回复 | 直到 16 年前

Echilon Mafarnakus 13 年前

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

Quentin 16 年前

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

kennebec 16 年前

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

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

Peter Mortensen Pieter Jan Bonestroo 16 年前

在Firefox中

formElement.constructor

返回“HTMLFormElement”。因此,您可以通过以下方式提交表格:

HTMLFormElement.prototype.submit.call(formElement)

您还可以将其扩展到其他浏览器:

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

Peter Mortensen Pieter Jan Bonestroo 16 年前

使用JavaScript提交表单

您的用户可以通过手机浏览您的网站、禁用JavaScript、调整页面的源代码或使用 Lynx .

在任何情况下,出于可访问性的目的,您都需要在服务器端使用旧的HTML提交按钮和一些输入检查。

Jonathon 13 年前

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

Zigri2612 10 年前

只需使用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>