如何使用 JavaScript 动态创建表单?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3991204/
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
How to create a form dynamically using JavaScript?
提问by chanchal1987
I want to create a invisible form anywhere into a HTML page dynamically using JavaScript and then submit automatically.
I want to create the form given below:
我想使用 JavaScript 在 HTML 页面的任何位置动态创建一个不可见的表单,然后自动提交。
我想创建下面给出的表单:
<form name='myForm' method='post' action='http://www.another_page.com/index.htm'>
<input type='text' name='myInput' value='Values of my input'>
<input type='hidden1' value='Hidden value 1'>
<input type='hidden2' value='Hidden value 2'>
</form>
I tried using the JavaScript below:
我尝试使用下面的 JavaScript:
my_form=document.createElement('FORM');
my_form.name='myForm';
my_form.method='POST';
my_form.action='http://www.another_page.com/index.htm';
my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name='myInput';
my_tb.value='Values of my Input';
my_tb.appendChild(my_form);
document.body.add(my_form,document.body.elements[0]);
document.my_form.submit();
But not working? How can I do that? Please help.
但不工作?我怎样才能做到这一点?请帮忙。
回答by Sam Dufel
You're adding the form element as a child of the text box.
您将表单元素添加为文本框的子元素。
my_tb.appendChild(my_form);
Should be
应该
my_form.appendChild(my_tb);
Also, I don't see where you're trying to create the hidden elements, but it's the same thing as adding a text box.
此外,我没有看到您尝试创建隐藏元素的位置,但这与添加文本框是一样的。
Another problem - trying to reference the form as document.xxx means that xxx is the nameof the form. But anyway, try
另一个问题 - 尝试将表单引用为 document.xxx 意味着 xxx 是表单的名称。但无论如何,尝试
my_form=document.createElement('FORM');
my_form.name='myForm';
my_form.method='POST';
my_form.action='http://www.another_page.com/index.htm';
my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name='myInput';
my_tb.value='Values of my Input';
my_form.appendChild(my_tb);
my_tb=document.createElement('INPUT');
my_tb.type='HIDDEN';
my_tb.name='hidden1';
my_tb.value='Values of my hidden1';
my_form.appendChild(my_tb);
document.body.appendChild(my_form);
my_form.submit();
回答by Saurabh Chauhan
var myform = document.createElement("form");
product = document.createElement("input");
product.value = JSProduct;
product.name = "Product";
myform.action = "myForm.aspx";
myform.method = "post";
form1.appendChild(product);
document.body.appendChild(form1);
form1.submit();
This will create a form and which has a child element product ("Input type") you have to append child element to parent element like product to form and form to DOM root elemnt body and document and you can add atribut of the form as action and method this will do your thing.
这将创建一个表单,它有一个子元素产品(“输入类型”),您必须将子元素附加到父元素,如产品到表单和表单到 DOM 根元素主体和文档,您可以添加表单的属性作为操作和方法这会做你的事。
回答by josepmra
You also can do the Saurabh Chauhan response but without add the dinamic element to body This solution is all dinamic solution.
您也可以执行 Saurabh Chauhan 响应,但无需将 dinamic 元素添加到 body 这个解决方案是所有的 dinamic 解决方案。
var myform = document.createElement("form");
myform.action = "myForm.aspx";
myform.method = "post";
product = document.createElement("input");
product.value = "value";
product.name = "name";
myform.appendChild(product);
myform.submit();
回答by Evan Mulawski
You could try the simple approach of using:
您可以尝试使用以下简单方法:
<script type="text/javascript">document.write("[the form's HTML]");</script>
inside the body somewhere. Then, to submit the form, add:
体内某处。然后,要提交表单,请添加:
<script type="text/javascript">document.my_form.submit();</script>
This prevents mistakes when creating the DOM programmatically.
这可以防止在以编程方式创建 DOM 时出错。