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

Read Also:  SSL forcefully Redirect HTTP to HTTPS Using .htaccess File

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

Read Also:  PHP Set custom headers using cURL Example

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.

Read Also:  JavaScript Image Thumbnails Preview Gallery

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Jquery .next() and .prev() functions example
  2. Read Also:  Laravel 6 Update Increment column
  3. Read Also:  JQuery Ajax Dynamic Treeview using PHP MySQL Example
  4. Read Also:  Remove empty values from array in PHP
  5. Read Also:  PHP MySQLi Database connection select Multiple query
  6. Read Also:  How to export mysql data to pdf using php with demo?
  7. Read Also:  React JS Interview Questions and Answers
  8. Read Also:  Angularjs Login And Registration Modal Template
  9. Read Also:  Task Scheduling with Cron Job using Laravel 5/6/7
  10. Read Also:  jQuery 15 Powerful Tips and Tricks for Developers and Web Designer
CLOSEX