使用javascript动态创建和提交表单
[英]create and submit form dynamically using javascript
问题描述
This is so basic, but I spent sometimes now and couldn't figure it out.
这是非常基本的，但我现在有时花了，无法弄清楚。
I am trying to create a form with one hidden input and submit it to "test.php" page using jQuery.我正在尝试创建一个带有一个隐藏输入的表单，并使用 jQuery 将其提交到“test.php”页面。 However, I can't access this form when, so I am not sure where is the problem!!但是，我何时无法访问此表单，所以我不确定问题出在哪里！！
This is jQuery to create and submit the form:这是用于创建和提交表单的 jQuery：
$('#submitForm').on('click', function(e){
e.preventDefault();
//Create a Form
var f = document.createElement("form");
f.setAttribute('id','queryForm');
f.setAttribute('name','queryForm');
f.setAttribute('method',"post");
f.setAttribute('action',"test.php");
var i = document.createElement("input");
i.setAttribute("type", "hidden");
i.setAttribute('name',"query");
i.setAttribute('id',"queryId");
i.setAttribute("value", "success");
f.appendChild(i);
document.body.appendChild(f);
//Send the Form
f.submit();
});
In "test.php" I have the code bellow.在“test.php”中，我有下面的代码。 I tried to print the form length to make sure I submitted the form correctly but I get 0!!我试图打印表格长度以确保我正确提交了表格，但我得到了 0！
<body>
<script>
var formlength = document.forms.length;
alert(formlength); // I get 0
</script>
</body>
Thanks in advance!提前致谢！
3 个解决方案
解决方案1
0 2014-05-19 06:33:13
document.forms.length counts the number of <form> -tags not the submitted data. document.forms.length计算<form> -tags 的数量而不是提交的数据。
As of you're using php (put it in test.php).因为你正在使用 php（把它放在 test.php 中）。
<?php
if( isset($_POST['query']) ) {
echo htmlspecialchars( $_POST['query'] );
}
Take a look here: http://jsfiddle.net/428GQ/1/ .看看这里： http : //jsfiddle.net/428GQ/1/ 。 I've commented out the submit and changed the hidden field to a text (just to make sure it works).我已经注释掉提交并将隐藏字段更改为文本（只是为了确保它有效）。 Now add the above code the test.php and watch it work (of course you will have to remove the comments first).现在将上面的代码添加到 test.php 并观察它的工作（当然你必须先删除注释）。
解决方案2
0 已采纳 2014-05-19 06:38:03
The jQuery code is fine. jQuery 代码很好。 Put this line in the test.php file to test it out:将此行放在 test.php 文件中以进行测试：
<?php echo $_POST['query']; ?>
It should output "success" on the test.php page它应该在 test.php 页面上输出“成功”
解决方案3
0 2014-05-19 06:38:14
I altered your code to use more Jquery and as advice by [ Niclas Larsson] put it in the footer.. please check this我修改了你的代码以使用更多的 Jquery，并根据 [Niclas Larsson] 的建议把它放在页脚中.. 请检查这个
//Create a Form
var $f = document.createElement('<form></form>');
$f.attr('id','queryForm');
$f.attr('name','queryForm');
$f.attr('method',"post");
$f.attr('action',"test.php");
var $i = $( '<input />' );
$i.attr("type", "hidden");
$i.attr('name',"query");
$i.attr('id',"queryId");
$i.attr("value", "success");
$f.append(i);
$('body').append(f);
console.log($f);
//Send the Form
$f.submit();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.