Add And Remove Text box Dynamically Using JavaScript Example

in javascript add and remove text box, Demo of adding and removing textboxes dynamically using simple JavaScript Example.

Simply use two JavaScript functions:

  • add_field(): It first gets or fetch the data element id where we want to added a new element followed by creation of fresh element and appending it inside the html form element.
  • remove_field(): It removes/deletes the last added new element.

add and remove html elements dynamically with jquery

Dynamically Adding and Removing Text Boxes using JavaScript

The Markup and the Script
index.html

<html>
<head>
<title>Demo of adding and removing textboxes dynamically using simple JavaScript</title>
<script>
function add_field()
{
  var all_count_rows=document.getElementsByClassName("add_remove_input_form_txt");
  all_count_rows=all_count_rows.length+1;
  document.getElementById("field_div").innerHTML=document.getElementById("field_div").innerHTML+
  "<p id='input_text"+all_count_rows+"_wrapper'><input type='text' class='add_remove_input_form_txt' id='add_remove_input_form_txt"+all_count_rows+"' placeholder='Enter Your Text'><input type='button' value='Remove' onclick=remove_field('add_remove_input_form_txt"+all_count_rows+"');></p>";
}
function remove_field(id)
{
  document.getElementById(id+"_wrapper").innerHTML="";
}
</script>
<style>
body
{
  margin:0 auto;
  padding:0;
  text-align:center;
  height:2000px;
  background-color:silver;
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
input[type="text"]
{
  width:200px;
  height:35px;
  margin-right:2px;
  border-radius:3px;
  border:1px solid green;
  padding:5px;
}
input[type="button"]
{
  background:none;
  color:white;
  border:none;
  width:110px;
  height:35px;
  border-radius:3px;
  background-color:green;
  font-size:16px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="field_div">
        <input type="button" value="Add TextBox" onclick="add_field();">
    </div>
</div>
</body>
</html>

dynamically add multiple text boxes javascript

Example : dynamically add textbox on button click javascript

index.html

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically - www.pakainfo.com</title>
<script type=”text/javascript”>
var add_remove_input_form_txt=0;
 
//FUNCTION TO ADD TEXT BOX ELEMENT
function add_field()
{
add_remove_input_form_txt = add_remove_input_form_txt + 1;
var all_count_rows = document.getElementById(‘content’);
var newTBDiv = document.createElement(‘div’);
newTBDiv.setAttribute(‘id’,'strText’+add_remove_input_form_txt);
newTBDiv.innerHTML = “Text “+add_remove_input_form_txt+”: <input type=’text’ id=’” + add_remove_input_form_txt + “‘ name=’” + add_remove_input_form_txt + “‘/>”;
all_count_rows.appendChild(newTBDiv);
}
 
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function remove_field()
{
if(add_remove_input_form_txt != 0)
{
var all_count_rows = document.getElementById(‘content’);
all_count_rows.removeChild(document.getElementById(‘strText’+add_remove_input_form_txt));
add_remove_input_form_txt = add_remove_input_form_txt-1;
}
}
</script>
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript - www.pakainfo.com</p>
<p><a href=”javascript:add_field();” >Add</a> <a href=”javascript:remove_field();” >Remove</a></p>
<div id=”content”></div>
</body>
</html>

I hope you get an idea about javascript add and remove text box.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP Get Folder Path From File Path Examples
  2.   How to export mysql data to pdf using php with demo?
  3.   Vue.Js Date & Time Function with Example
  4.   PHP download file from url using curl example
  5.   Convert object to Array in PHP Example
  6.   What is the difference between Java and JavaScript?
  7.   AngularJS Share data between controllers
  8.   Vuejs Barcode Generator with example - vue-barcode
  9.   Remove empty values from array in PHP
  10.   PHP Get domain name from full URL with parameters
Tags:, , , ,