How to create a form dynamically using JavaScript?

Question

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:

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

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.

The problem with .innerHTML is when you try to submit the form. You won't have a reference to the form, and it may not have been added to the DOM. — Sam Dufel
– Sam Dufel, Commented Oct 21, 2010 at 19:42

Sam Dufel · Accepted Answer · 2016-06-23 16:20:52Z

30

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 name of the form. But anyway, try

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

edited Jun 23, 2016 at 16:20

answered Oct 21, 2010 at 19:39

Sam Dufel

17.6k3 gold badges51 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlexV Over a year ago

Beated me! from a few secs :) +1

josepmra · Accepted Answer · 2014-12-09 18:23:25Z

3

You also can do the Saurabh Chauhan response but without add the dinamic element to body This solution is all dinamic solution.

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

answered Dec 9, 2014 at 18:23

josepmra

6279 silver badges26 bronze badges

1 Comment

NoRyb Over a year ago

the submit() is not performed if the myform is not appended to the document.body. As soon as I add document.body.appendChild(myform);, your code works too.

Saurabh Chauhan · Accepted Answer · 2014-01-23 11:09:43Z

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

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.

answered Jan 23, 2014 at 11:09

Saurabh Chauhan

1448 bronze badges

2 Comments

CWSites Over a year ago

Not sure why you're creating myform and then later on using form1

jjzjx118_2 Over a year ago

how can I add params to the post function?

Collectives™ on Stack Overflow

How to create a form dynamically using JavaScript?

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related