Dynamically create and submit form

2019-01-07 06:46发布

站内问答 / JavaScript
866 8 4

Is there a way in jQuery to create and submit a form on the fly.

Something like below.

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

Is this supposed to work or there is a different way to do this?

8条回答
Anthone
2楼-- · 2019-01-07 07:10

Like Purmou, but removing the form when submit will done.

$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2019-01-07 07:11

Yes, you just forgot the quotes ...

$('<form/>').attr('action','form2.html').submit();
查看更多
0人赞 添加讨论(0) 举报
聊天终结者
4楼-- · 2019-01-07 07:12

Why don't you $.post or $.get directly?

GET requests:

$.get(url, data, callback);

POST requests:

$.post(url, data, callback);

Then you don't need a form, just send the data in your data object.

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});
查看更多
0人赞 添加讨论(0) 举报
叛逆
5楼-- · 2019-01-07 07:24

There were two things wrong with your code. The first one is that you included the $(document).ready(); but didn't wrap the jQuery object that's creating the element with it.

The second was the method you were using. jQuery will create any element when the selector (or where you would usually put the selector) is replaced with the element you wish to create. Then you just append it to the body and submit it.

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

Here's the code in action. In this example, it doesn't auto submit, just to prove that it would add the form element.

Here's the code with auto submit. It works out fine. Jsfiddle takes you to a 404 page because "form2.html" doesn't exist on its server, obviously.

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
6楼-- · 2019-01-07 07:24

Josepmra example works well for what i need. But i had to add the line 

 form.appendTo( document.body )

for it to work. 

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();
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
7楼-- · 2019-01-07 07:26

Yes, it is possible. One of the solutions is below (jsfiddle as a proof).

HTML:

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

(see, above there is no form)

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

The above example shows you how to create form, how to add inputs and how to submit. Sometimes display of the result is forbidden by X-Frame-Options, so I have set target to _top, which replaces the main window's content. Alternatively if you set _blank, it can show within new window / tab.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)