Dynamically add button, textbox, input, radio elements in html form using JavaScript.

Adding Elements like textbox, button, radio button etc in a html form using JavaScript is very simple. JavaScript’s document object has a method called createElement() which can be used to create html elements dynamically.

We had used this function in our tutorial: Dynamic combobox-listbox-drop-down using javascript to add dynamic options to a combo box-listbox. Let us use this function to create textboxes, radio buttons, buttons etc dynamically and add them in our page.

add element form html dynamically javascript

Following is the source code of our example.

<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function add(type) {

	//Create an input type dynamically.
	var element = document.createElement("input");

	//Assign different attributes to the element.
	element.setAttribute("type", type);
	element.setAttribute("value", type);
	element.setAttribute("name", type);


	var foo = document.getElementById("fooBar");

	//Append the element in page (in span).
	foo.appendChild(element);

}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<SELECT name="element">
	<OPTION value="button">Button</OPTION>
	<OPTION value="text">Textbox</OPTION>
	<OPTION value="radio">Radio</OPTION>
</SELECT>

<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

<span id="fooBar">&nbsp;</span>

</FORM>
</BODY>
</HTML>

Also note that we have used setAttribute() method to assign the attributes to our dynamically created element.

Demo

Any other way of adding elements dynamically in html page?
Let me know.

If you read this far, you should follow me on twitter here.



112 Comments

  • Anushree 11 June, 2013, 17:17

    How to add multiple radio button dynamically using java script. with a title in front of each

  • bidyut saha 11 June, 2013, 20:47

    kep sharing ji

  • Bhargav Goswami 14 June, 2013, 15:43

    Very useful

  • Tim 14 June, 2013, 23:48

    Spent an hour googling for an example for dynamically generated forms. Thanks for the read and info.

  • Randz 25 June, 2013, 12:08

    how to save them if you have created and used a couple of textboxes?

  • mike 30 August, 2013, 23:52

    Thanks for your help. This was the clearest example I found.

  • Alex 16 October, 2013, 5:26

    hello, i am trying to create a dynamic website to works in a google chrome com document.write but i know that code doesn’t work in chrome . so i would like to use a document.createElement. but i don’t know how. The original code is :

    function Image(arquivo,arquivo2){
                this.src = arquivo; 
                this.texto = arquivo2;
                 } 
    
             
          foto_actual=1
          cant_fotos=3
                
       foto_3 = new Image('https://lh4.googleusercontent.com/-Kic-U1poM-A/T9LFzOtBeHI/AAAAAAAABhU/gvydOaCykBY/s435/Ford%2520Thunderbird.png','TESTE 1');             
              
       foto_2 = new Image('https://lh5.googleusercontent.com/-_nSmqWg3GUc/T9LFpD2mDoI/AAAAAAAABhM/Cb-85BGq1Ng/s435/Double%2520Deck.png','TESTE 2');             
                
       foto_1 = new Image('https://lh6.googleusercontent.com/-99J0CGeHXNo/T9LFeTKWDxI/AAAAAAAABg8/rmO5NEP2eEM/s435/Ford%2520Cortina.png','TESTE 3'); 
    
               function swp_foto(direcc){  if ( direcc == "+" ) { foto_actual = foto_actual + 1;
                       if (foto_actual&gt;cant_fotos) {foto_actual=1;}}
                       else { foto_actual = foto_actual - 1;
                       if (foto_actual&lt;1) {foto_actual=cant_fotos;}}
                document[&#039;foto_prod&#039;].src = eval( "foto_"+foto_actual+".src" );
                document.createElement.T1= eval( "foto_"+foto_actual+".texto" );
    			
               }
        

    If you can send me the solution by e-mail i will be grateful . Regards.

  • Mohamed Ameenullah 14 February, 2014, 15:28

    very useful. thanks a lot…. keep sharing your knowledge

  • dax 13 March, 2014, 11:18

    how to get values of all dynamically created textboxes in php and display it in php??

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]