使用 javascript 创建和提交表单答案

【问题标题】：creating and submitting a form with javascript使用 javascript 创建和提交表单
【发布时间】：2012-10-21 20:22:52
【问题描述】：

我正在尝试创建一个表单并立即使用 javascript 提交它，但我无法弄清楚我做错了什么。这是我的代码：

function autoLogIn(un, pw) {
var form = document.createElement("form");
document.body.appendChild(form);
form.method = "POST";
form.action = "login.php";
var element1 = document.createElement("<INPUT NAME='un' TYPE='hidden' VALUE='"+un+"'>");  
 form.appendChild(element1);
var element2 = document.createElement("<INPUT NAME='pw' TYPE='hidden' VALUE='"+pw+"'>"); 
form.appendChild(element2);
form.submit();
}

【问题讨论】：

您正确创建了表单元素。但是输入发生了什么？它也应该以同样的方式完成！另外，刚刚注意到，您正在附加表单，然后更改它的属性，而且，从不将 element1,2 附加到表单！总体而言，它几乎一团糟！为什么不改用 xhr？
你可以使用form.innerHTML += "<INPUT NAME='un' TYPE='hidden' VALUE='"+un+"'>"; 但正如@goldenparrot 指出的那样，你错误地使用了document.createElement。
@goldenparrot 输入字段附加到表单中。只是代码和字段的创建代码在同一行。
大声笑..我智障。我不知道为什么我没有尝试。谢谢你的帮助。什么是 xhr？
有谁知道是否可以在不将其附加到 DOM 的情况下提交表单？

标签： javascript

【解决方案1】：

问题是 createElement 不接受 HTML。它接受一个标记名并返回一个 DOM 元素。然后，您可以将此元素的 value 属性设置为您需要的值。

function autoLogIn(un, pw) {
    var form = document.createElement("form");
    var element1 = document.createElement("input"); 
    var element2 = document.createElement("input");  

    form.method = "POST";
    form.action = "login.php";   

    element1.value=un;
    element1.name="un";
    form.appendChild(element1);  

    element2.value=pw;
    element2.name="pw";
    form.appendChild(element2);

    document.body.appendChild(form);

    form.submit();
}

【讨论】：

最好在将输入附加到文档后将表单附加到文档中，这样 DOM 只会更新一次。此外，要成功，表单控件必须有一个名称，否则它们将不会被发送。
感谢您提供小写字母标签名称。出于某种原因，对标签和/或属性使用大写字母真的让我很烦。
如何在这个表单提交中传递contentType

【解决方案2】：

修改代码：jsfiddle。

function autoLogIn(un, pw) {
   var form = document.createElement("form");
   document.body.appendChild(form);
   form.method = "POST";
   form.action = "login.php";
   var element1 = document.createElement("INPUT");         
    element1.name="un"
    element1.value = un;
    element1.type = 'hidden'
    form.appendChild(element1);
    var element2 = document.createElement("INPUT");         
    element2.name="pw"
    element2.value = pw;
    element2.type = 'hidden'
    form.appendChild(element2);
    form.submit();
}

【讨论】：

【解决方案3】：

您也可以进行 Saurabh Chauhan 响应，但不向主体添加动态元素此解决方案是所有动态解决方案。

    var myform = document.createElement("form");
    myform.action = "myForm.aspx";
    myform.method = "post";


    product = document.createElement("input");
    product.value = "value";
    product.name = "name";

    myform.appendChild(product);
    myform.submit();

【讨论】：

注意，这段代码现在不能在大多数浏览器的最新版本中工作，因为它们现在正在执行 HTML 标准的 4.10.21.3.2 项。见->html.spec.whatwg.org/multipage/…。即document.body.appendChild(form); 是必要的

【解决方案4】：

我为此创建了一个函数：

function PostDataRedirect(data, dataName, location) {
var form = document.createElement("form");

form.method = "POST";
form.action = location;

if (data.constructor === Array && dataName.constructor === Array) {
    for (var i = 0; i < data.length; i++) {
        var element = document.createElement("input");
        element.type = "hidden";
        element.value = data[i];
        element.name = dataName[i];
        form.appendChild(element);
    }
} else {
    var element1 = document.createElement("input");
    element1.type = "hidden";
    element1.value = data;
    element1.name = dataName;
    form.appendChild(element1);
}

document.body.appendChild(form);

form.submit(); 
}

提问的用法：

PostDataRedirect([ un, pw ], ["un", "pw"], "login.php");

【讨论】：