动态创建和提交表单

San*_*kak 76 javascript forms jquery submit

有没有办法在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>
Run Code Online (Sandbox Code Playgroud)

这是应该工作还是有不同的方法来做到这一点?

Pur*_*rag 97

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

第二个是你正在使用的方法.当选择器(或通常放置选择器的位置)替换为您要创建的元素时,jQuery将创建任何元素.然后你只需将它附加到身体并提交它.

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

这是代码的实际应用.在这个例子中,它不会自动提交,只是为了证明它会添加表单元素.

这是自动提交的代码.它运作得很好.Jsfiddle带你到404页面,因为显然它的服务器上不存在"form2.html".

  • 它可能适用于某些浏览器,但有一个很好的理由将大多数DOM操作代码包含在`$(document).ready()`块中 - 它确保浏览器能够安全地对DOM进行任何更改.否则,如果您尝试在整个页面加载之前更改任何内容,那么像IE6/7这样的挑剔浏览器会吐出虚拟内容. (3认同)
  • @ user42540:不一定,但最好在页面加载完成后触发你的JS代码.这样可以防止意外错误. (2认同)

Tad*_*eck 93

对的,这是可能的.其中一个解决方案如下(jsfiddle作为证据).

HTML:

<a id="fire" href="#" title="submit form">Submit form</a>
Run Code Online (Sandbox Code Playgroud)

(见上面没有表格)

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();
});
Run Code Online (Sandbox Code Playgroud)

上面的示例向您展示了如何创建表单,如何添加输入以及如何提交.有时显示结果是禁止的X-Frame-Options,所以我设置target_top,它取代了主窗口的内容.或者,如果您设置_blank,它可以在新窗口/选项卡中显示.

  • 它需要.appendTo('body')才能在我的Firefox(23.0.1)中运行.否则它只返回一个表单对象但不提交. (19认同)
  • .newForm.hide()appendTo( "身体")提交().//不显示字段并在FF中工作 (5认同)
  • 就像这样做GET并且类似于将查询字符串添加到目标URI.假设很多人都想使用表单来POST.如果不明显,请使用''method':post`来实现这一目标. (2认同)

小智 23

它的My版本没有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();
}
Run Code Online (Sandbox Code Playgroud)

用法:

post_to_url('fullurlpath', {
    field1:'value1',
    field2:'value2'
}, 'post');
Run Code Online (Sandbox Code Playgroud)


小智 12

像Purmou一样,但提交时删除表单就完成了.

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


Nic*_*ery 8

是的,你刚忘了引号......

$('<form/>').attr('action','form2.html').submit();
Run Code Online (Sandbox Code Playgroud)


小智 7

Josepmra示例适用于我需要的东西.但我不得不添加这条线

 form.appendTo( document.body )
Run Code Online (Sandbox Code Playgroud)

它的工作原理.

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();
Run Code Online (Sandbox Code Playgroud)


jos*_*mra 5

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

    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();
Run Code Online (Sandbox Code Playgroud)