Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a form dynamically using JavaScript?

Tags:

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.

like image 332
chanchal1987 Avatar asked Oct 21 '10 19:10

chanchal1987


People also ask

How do I create a dynamic form?

The task is to create an HTML form dynamically with the help of JavaScript. There are two approaches that are discussed below. Approach 1: Use document. createElement() to create the new elements and use setAttribute() method to set the attributes of elements.

How do you create a dynamic input field in HTML?

If you want to dynamically add elements, you should have a container where to place them. For instance, a <div id="container"> . Create new elements by means of document. createElement() , and use appendChild() to append each of them to the container.

How do I create a dynamic form in react JS?

The values will be input.name and input.Create a function called handleFormChange. Assign this function to the input fields as an onChange event. This onChange event takes two parameters, index and event. Index is the index of the array and event is the data we type in the input field.


2 Answers

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(); 
like image 139
Sam Dufel Avatar answered Jan 01 '23 22:01

Sam Dufel


              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.

like image 26
Saurabh Chauhan Avatar answered Jan 01 '23 22:01

Saurabh Chauhan