Javascript 动态创建和提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8003089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically create and submit form
提问by Santosh Gokak
Is there a way in jQuery to create and submit a form on the fly.
jQuery 中有没有一种方法可以动态创建和提交表单。
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?
这应该有效还是有不同的方法来做到这一点？
回答by Purag
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.
您的代码有两处错误。第一个是您包含$(document).ready();但没有包装使用它创建元素的 jQuery 对象。
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.
第二个是你使用的方法。jQuery将在替换您要创建的元素时替换选择器（或通常将选择器）替换的选择器（或通常将选择器）替换的元素。然后您只需将其附加到正文并提交即可。
$(document).ready(function(){
$('<form action="form2.html"></form>').appendTo('body').submit();
});
Here'sthe code in action. In this example, it doesn't auto submit, just to prove that it would add the form element.
这是运行中的代码。在这个例子中，它不自动提交，只是为了证明它会添加表单元素。
Here'sthe 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.
这是自动提交的代码。效果很好。Jsfiddle 将您带到 404 页面，因为显然其服务器上不存在“form2.html”。
回答by Tadeck
Yes, it is possible. One of the solutions is below (jsfiddle as a proof).
对的，这是可能的。解决方案之一如下（jsfiddle 作为证明）。
HTML:
HTML：
<a id="fire" href="#" title="submit form">Submit form</a>
(see, above there is no form)
（看，上面没有表格）
JavaScript:
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 targetto _top, which replaces the main window's content. Alternatively if you set _blank, it can show within new window / tab.
上面的示例向您展示了如何创建表单、如何添加输入以及如何提交。有时显示结果被 禁止X-Frame-Options，所以我设置target为_top，它替换了主窗口的内容。或者，如果您设置_blank，它可以显示在新窗口/选项卡中。
回答by Muthukumar Anbalagan
Its My version without jQuery, simple function can be used on fly
它的我的版本没有jQuery，简单的功能可以即时使用
Function:
功能：
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();
}
Usage:
用法：
post_to_url('fullurlpath', {
field1:'value1',
field2:'value2'
}, 'post');
回答by javray
Like Purmou, but removing the form when submit will done.
像 Purmou 一样，但在提交时删除表单将完成。
$(function() {
$('<form action="form2.html"></form>').appendTo('body').submit().remove();
});
回答by Nicolas Thery
Yes, you just forgot the quotes ...
是的，你只是忘记了引号......
$('<form/>').attr('action','form2.html').submit();
回答by webs
Josepmra example works well for what i need. But i had to add the line
Josepmra 示例非常适合我的需要。但我不得不添加行
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();
回答by josepmra
Try with this code -
It is a totally dynamic solution:
尝试使用此代码 -
这是一个完全动态的解决方案：
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();
回答by SparK
Why don't you $.postor $.getdirectly?
GETrequests:
GET要求：
$.get(url, data, callback);
POSTrequests:
POST要求：
$.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!");
});
回答by Anthony
Assuming you want create a form with some parameters and make a POST call
假设您想创建一个带有一些参数的表单并进行 POST 调用
var param1 = 10;
$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();
You could also do it all on one line if you so wish :-)
如果您愿意，您也可以在一行上完成所有操作:-)
