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

Code language: HTML, XML (xml)
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.

View Comments

  • How can use the added text box value in php?

    description:
    the text box will be dynamically added by user and then the added text box value posted to php file.

  • Hi Saran,
    Use normal html form to post the textbox value in PHP script. The dynamically created textbox's value can be access in PHP using normal $_GET["textboxname"] variable in PHP.

  • Hi Angeline,
    To add labels to textboxes, buttons etc you can add text to the parent attribute.
    For example:

       //Create lable
   var lab = document.createElement("span");
   lab.innerHTML = "This is button label";

    var foo = document.getElementById("fooBar");  
    foo.appendChild(lab);
   //Now add button
  ..
     foo.appendChild(element);

  • hi...

    I have text box A1, B1, C1. I click ADD and the table will append and text box A2, B2, B3 appeared.... and the next row appear when i click ADD again. but i have a button name SUM, when i click SUM, how can i make it to be A1+B1 and the result appear in C1 and also to A2, B2, B3 and below...

  • Hi jAi,
    For implementing such a functionality, you may have to use javascript dom manipulation heavily.
    First you may iterate through all the rows of table, get pointer to textboxes Ax and Bx, where x is the row id. Then sum it and update Cx. If I implement such code, my code would be:

    var table = document.getElementById("table_id");
var totalrows = table.rows.length;
for(var x=0; x 

    You may want to look at similar tutorial: Adding Rows Dynamically in Table.
Leave a Comment
Share
Published by
Viral Patel
Tags: dynamic combobox dynamic elements dynamic textbox How-To html form JavaScript
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago