如何使用JavaScript动态创建表单？

我想使用JavaScript动态地在HTML页面的任何位置创建一个不可见的表单，然后自动提交。
我想创建如下形式：如何使用JavaScript动态创建表单？

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

我试着用下面的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();

但不工作？我怎样才能做到这一点？请帮忙。

来源

2010-10-21 chanchal1987

也许您应该只使用'.innerHTML' ... – kennytm 2010-10-21 19:38:15

.innerHTML的问题是当您尝试提交表单时。您不会有对表单的引用，并且它可能尚未添加到DOM。 – 2010-10-21 19:42:13

您将表单元素添加为文本框的子元素。

my_tb.appendChild(my_form);

应该

my_form.appendChild(my_tb);

另外，我不明白，你想创建的隐藏要素，但它是一回事，添加一个文本框。

另一个问题 - 试图引用表单为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();

来源

2010-10-21 19:39:02

殴打我！从几秒钟:) +1 – AlexV 2010-10-21 19:39:51

仍然无法正常工作... – chanchal1987 2010-10-21 19:49:46

谢谢...它的工作... – chanchal1987 2010-10-21 20:07:06

你可以尝试使用的简单的方法：

<script type="text/javascript">document.write("[the form's HTML]");</script>

体内某处。然后，要提交表单，请添加：

<script type="text/javascript">document.my_form.submit();</script>

这样可以防止在以编程方式创建DOM时出现错误。

来源

2010-10-21 19:40:22

我的文档不是空白。它已经有一些内容。 – chanchal1987 2010-10-21 19:45:57

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

这将创建一种形式，具有子元素的产品（“输入型”），你必须子元素追加到同类产品的父元素形成，并形成以DOM根elemnt身体和文档，你可以添加表单作为操作和方法这将做你的事情。

来源

2014-01-23 11:09:43

你也可以做Saurabh Chauhan的回应，但不添加动态元素到身体这个解决方案是所有动态解决方案。

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

来源

2014-12-09 18:23:25 josepmra

如果'myform'没有附加到'document.body'，'submit（）'不会被执行。只要我添加'document.body.appendChild（myform）;'，你的代码也可以工作。 – NoRyb 2016-06-23 07:23:50

如何使用JavaScript动态创建表单？

回答

相关问题