动态创建和提交表单

80

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>

这应该可行吗，或者有其他方法可以做到这一点？

— Santosh Gokak
source

您已阅读API吗？

— geoffreak 2011年

也看看接受的答案在这里：stackoverflow.com/questions/14836557/...

— thdoan

107

您的代码有两件事。第一个是您包括，$(document).ready();但没有包装使用它创建元素的jQuery对象。

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

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

这是运行中的代码。在此示例中，它不会自动提交，只是为了证明它将添加form元素。

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

— 普拉格
source

您提到的第一个问题不是问题：)

— Santosh Gokak

2

@ user42540：不一定，但是最好在页面完成加载后触发JS代码。这将防止不必要的错误。

— Purag 2011年

3

它可能在某些浏览器上可以运行，但是有充分的理由将大多数DOM操作代码包含在一个$(document).ready()块中-它可以确保浏览器能够安全地对DOM进行任何更改。否则，如果您尝试在加载整个页面之前进行任何更改，则像IE6 / 7这样挑剔的浏览器会吐出假人。

— GregL 2011年

99

是的，有可能。解决方案之一如下（jsfiddle作为证明）。

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，它可以显示在新窗口/选项卡中。

— 塔德克
source

好的解决方案（虽然有点长），但是没有显示输入。

— Purag

@Purmou：实际的解决方案是创建表单，然后submit()调用。我有意提供了很长的表单创建代码，以展示如何创建表单及其元素。我相信这还可以。

— 塔德克2011年

22

它需要.appendTo（'body'）才能在我的Firefox（23.0.1）中工作。否则，它仅返回一个表单对象，但不提交。

— Curtis Yallop 2013年

5

newForm.hide（）。appendTo（“ body”）。submit（）; //不显示字段并且在FF中工作

— laffuste

4

这样做是GET，类似于将查询字符串附加到目标URI。假设许多人都想使用表格进行POST。如果不太明显，请使用'method': post来完成。

— ficuscr 2015年

33

我的版本没有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');

— Muthukumar Anbalagan
source

13

就像Purmou一样，但是在提交时删除表单即可。

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

— 贾维雷
source

8

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

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

— 尼古拉斯·泰瑞（Nicolas Thery）
source

什么是JavaScript错误？尝试将其设置为就绪功能

— Nicolas Thery

这不适用于旧版IE，因为它无法附加在HTML DOM上。<body>在开始工作之前，需要将其附加到。

— 猛禽

8

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

— 网
source

4

尝试使用此代码-
这是一个完全动态的解决方案：

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

— 乔塞普拉
source

2

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

GET 要求：

$.get(url, data, callback);

POST 要求：

$.post(url, data, callback);

然后，您不需要表单，只需将数据发送到数据对象中即可。

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

— 火花
source

1

因为需要触发从服务器下载并使用发布/获取操作，所以它不起作用。

— a20

另外，您也不会离开页面。

— robsch

@ a20缺少的是Content-Disposition: Attachment;要强制下载的服务器端标头。

— SparK

@SparK hmmmm ..您的评论让我感到奇怪，浏览器在服务器端是否没有任何MIME类型可供浏览器解释（或不解释并强制）下载。例如一个zip文件。是否无法以任何方式指定它是对用户的下载请求的响应，所以触发下载...

— a20

@ a20是，Content-Type: application/octet-stream;。另外还有download在锚属性...客户端的东西（davidwalsh.name/download-attribute）

— 星火

0

假设您要创建带有某些参数的表单并进行POST调用

var param1 = 10;

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

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

— 安东尼
source