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

Question

我想使用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>

我试图使用以下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();

但是没有起作用？我该怎么做？请帮忙。

- chanchal1987

---

你可能应该只使用.innerHTML... - kennytm

使用.innerHTML的问题在于当您尝试提交表单时，您将无法引用该表单，并且它可能尚未添加到DOM中。 - Sam Dufel

Answer 1

你正在将表单元素添加为文本框的子元素。

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

- Sam Dufel

---

打败我了！只用几秒钟 :) +1 - AlexV

Answer 2

              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根元素body和document中。您可以将表单的属性添加为action和method，这将解决您的问题。

- Saurabh Chauhan

---

不确定为什么你要创建 myform，然后后来又使用 form1。 - CWSites

如何在 post 函数中添加参数？ - jjzjx118_2

Answer 3

您也可以使用Saurabh Chauhan的方法来响应，但不必在body中添加动态元素。这种解决方案是完全动态的解决方案。

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

- josepmra

---

如果myform没有附加到document.body，则不会执行submit()。只要我添加document.body.appendChild(myform);，你的代码也可以正常工作。 - NoRyb