CODEWITHSUNDEEP
javascriptforms
chanchal1987
chanchal1987

Reputation: 2367

How to create a form dynamically using JavaScript?

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.

Upvotes: 25

Views: 81213

Answers (3)

Sam Dufel
Sam Dufel

Reputation: 17608

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

Upvotes: 30

josepmra
josepmra

Reputation: 627

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

Upvotes: 3

Saurabh Chauhan
Saurabh Chauhan

Reputation: 144

              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.

Upvotes: 2

Related Questions