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

[ad name=”AD_INBETWEEN_POST”] 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.

Get our Articles via Email. Enter your email address.

You may also like...

122 Comments

  1. Anushree says:

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

  2. bidyut saha says:

    kep sharing ji

  3. Bhargav Goswami says:

    Very useful

  4. Tim says:

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

  5. Randz says:

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

  6. mike says:

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

  7. Alex says:

    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.

  8. Mohamed Ameenullah says:

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

  9. dax says:

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

  10. jkdoan says:

    Hi,

    Does anyone know to how to hide/display a button based on another field dynamically?

    Thanks,

  11. mohammed says:

    Hii . . .i have a requirement. i want to display and also text box and select box at a time by only clicking one hyper link.
    Plz help me out

  12. mohammed says:

    Hii . . .i have a requirement. i want to display and also delete text box and select box at a time by only clicking one hyper link for adding and another for deleting.
    Plz help me out

  13. trendrumah says:

    nice Post,
    Keep sharing pal!

  14. Devendra says:

    its useful but after refress all element disappear……
    please help…

  15. jeba says:

    how to create dynamic db

  16. ravi says:

    how to add them vertically??

  17. MaheshK says:

    i have a table which i am creating dynamically using javascript without using table tag, my problem is when i click on any text in a table, that text should be get appended in another new textbox using javascript, i want code for that i don’t know the logic, pls help me

  18. prakashsingh says:

    good post dear

  19. ZAREZADEH says:

    HI, I NEED TO CODE FOR SAVE DATA FROM NEW TEXT ADDED IN DATABASE.
    PLS HLP ME,
    TNKS.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>