动态创建并提交表单答案

【问题标题】：Dynamically create and submit form动态创建并提交表单
【发布时间】：2011-12-21 15:09:22
【问题描述】：

jQuery 中有没有一种方法可以即时创建和提交表单？

如下所示：

<html>
    <head>
        <title>Title Text Goes Here</title>
        <script src="http://code.jquery.com/jquery-1.7.js"></script>
        <script>
            $(document).ready(function(){alert('hi')});
            $('<form/>').attr('action','form2.html').submit();
        </script>
    </head>
    <body>
        Content Area
    </body>
</html>

这应该有效还是有其他方法可以做到这一点？

【问题讨论】：

你读过API吗？
还可以在这里查看接受的答案：stackoverflow.com/questions/14836557/…

标签： javascript jquery forms submit

【解决方案1】：

您的代码有两个问题。第一个是你包含了$(document).ready();，但没有用它来包装创建元素的jQuery对象。

第二个是您使用的方法。 jQuery将在替换您要创建的元素时替换选择器（或通常将选择器）替换为您要创建的元素时创建任何元素。然后，您只需将其附加到正文并提交即可。

$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});

Here's 正在运行的代码。在这个例子中，它没有自动提交，只是为了证明它会添加表单元素。

Here's 自动提交的代码。效果很好。 Jsfiddle 将您带到 404 页面，因为显然其服务器上不存在“form2.html”。

【讨论】：

你提到的第一个问题虽然不是问题:)
@user42540：不一定，但最好在页面加载完成后触发您的 JS 代码。这将防止不必要的错误。
它可能适用于某些浏览器，但有充分的理由将大多数 DOM 操作代码包含在 $(document).ready() 块中 - 它确保浏览器能够安全地对 DOM 进行任何更改。否则，如果您在整个页面加载之前尝试更改任何内容，IE6/7 等挑剔的浏览器就会吐出假人。

【解决方案2】：

是的，这是可能的。解决方案之一如下 (jsfiddle as a proof)。

HTML：

<a id="fire" href="#" title="submit form">Submit form</a>

（看，上面没有表格）

JavaScript：

jQuery('#fire').click(function(event){
    event.preventDefault();
    var newForm = jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    }));
    newForm.submit();
});

上面的示例向您展示了如何创建表单、如何添加输入以及如何提交。有时X-Frame-Options 禁止显示结果，所以我将target 设置为_top，它替换了主窗口的内容。或者，如果您设置_blank，它可以显示在新窗口/标签中。

【讨论】：

很好的解决方案（虽然有点长），但输入没有显示出来。
@Purmou：实际的解决方案是创建表单，然后调用submit()。我特意提供了长表单创建代码来展示如何创建表单及其元素。我相信这还不错。
.appendTo('body') 需要它才能在我的 Firefox (23.0.1) 中工作。否则它只返回一个表单对象但不提交。
newForm.hide().appendTo("body").submit(); // 不显示字段并在 FF 中工作
就像这是一个 GET 并且类似于将查询字符串附加到目标 URI。会假设很多人都想使用表单来发布。如果不明显，请使用'method': post 来完成。

【解决方案3】：

它是我的没有jQuery的版本，简单的功能可以在飞行中使用

功能：

function post_to_url(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

用法：

post_to_url('fullurlpath', {
    field1:'value1',
    field2:'value2'
}, 'post');

【讨论】：

【解决方案4】：

与 Purmou 类似，但在提交时会删除表单。

$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});

【讨论】：

【解决方案5】：

Josepmra 示例非常适合我的需要。但我必须添加行 form.appendTo(document.body) 才能正常工作。

var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");

var input = $("<input>")
    .attr("type", "hidden")
    .attr("name", "mydata")
    .val("bla" );

$(form).append($(input));

form.appendTo(document.body)

$(form).submit();

【讨论】：

【解决方案6】：

是的，你只是忘记了引号......

$('<form/>').attr('action','form2.html').submit();

【讨论】：

什么是javascript错误？试着把它放在ready函数中
这不适用于旧 IE，因为它不附加在 HTML DOM 上。它需要在开始工作之前附加到<body>。

【解决方案7】：

试试这段代码，这是一个完全动态的解决方案：

var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");

var input = $("<input>").attr("type", "hidden")
                        .attr("name", "mydata")
                        .val("bla");
$(form).append($(input));
$(form).submit();

【讨论】：

【解决方案8】：

你为什么不直接$.post或$.get？

GET 请求：

$.get(url, data, callback);

POST 请求：

$.post(url, data, callback);

那么你就不需要表单了，只需在你的数据对象中发送数据即可。

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});

【讨论】：

因为需要从服务器触发下载并且使用 post/get 它不起作用。
还有这个你不会离开页面。
@a20 缺少的是服务器端标头Content-Disposition: Attachment; 强制下载。
@SparK hmmmm .. 您的评论让我想知道，服务器端是否存在浏览器可以解释（或不解释和强制）下载的任何 mime 类型。例如一个 zip 文件。是否不可能以任何方式指定它是响应用户的下载请求所以触发下载...
@a20 是的，Content-Type: application/octet-stream;。锚点中还有 download 属性...客户端的东西 (davidwalsh.name/download-attribute)

【解决方案9】：

使用 Jquery

$('<form/>', { action: url, method: 'POST' }).append(
    $('<input>', {type: 'hidden', id: 'id_field_1', name: 'name_field_1', value: val_field_1}),
    $('<input>', {type: 'hidden', id: 'id_field_2', name: 'name_field_2', value: val_field_2}),
).appendTo('body').submit();

【讨论】：

【解决方案10】：

采取的步骤：

首先您需要创建表单元素。
您必须通过表单传递要导航到的 URL。
为表单指定method 类型。
添加表单正文。
最后在表单上调用submit()方法。

代码：

var Form = document.createElement("form");
Form.action = '/DashboardModule/DevicesInfo/RedirectToView?TerminalId='+marker.data;
Form.method = "post";
var formToSubmit = document.body.appendChild(Form);
formToSubmit.submit();

【讨论】：

【解决方案11】：

假设你想创建一个带有一些参数的表单并进行 POST 调用

var param1 = 10;

$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();

如果您愿意，也可以在一行中完成所有操作 :-)

【讨论】：

【解决方案12】：

您可以在提交时在表单中使用此功能。

但这是在 javascript 中，我想将其更改为 jquery。

我在网上搜索过，但没有一个保留 DOM，所以提交后可以将其删除。

const trimTypes = ['email', 'hidden', 'number', 'password', 'tel', 'text', null, ''];

function submitTrimmedDataForm(event) {
    event.preventDefault();

    let currentForm = event.target;
    var form = document.createElement("form");
    form.style.display = "none";
    form.method = currentForm.getAttribute('method');
    form.action = currentForm.getAttribute('action');

    Array.from(currentForm.getElementsByTagName('input')).forEach(el => {
        console.log("name :" + el.getAttribute('name') + ", value :" + el.value + ", type :" + el.getAttribute('type'));
        var element = document.createElement("input");
        let type = el.getAttribute('type');
        if (trimTypes.includes(type)) {
            element.value = trim(el.value);
        }
        element.name = el.getAttribute('name');
        element.type = el.getAttribute('type');
        form.appendChild(element);
    });

    Array.from(currentForm.getElementsByTagName('select')).forEach(el => {
        console.log("select name :" + el.getAttribute('name') + ", value :" + el.value);
        var element = document.createElement("input");
        element.value = el.value;
        element.name = el.getAttribute('name');
        element.type = 'text';
        form.appendChild(element);
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form); // this is important as well
}

【讨论】：