Home/ Questions/Q 7588921
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:03:00+00:00

How to created textbox dynamically , when i click add button. after i put

  • 0

How to created textbox dynamically , when i click add button.

after i put the input field in the text box.

how to validate the dynamically created textbox using javascript or jquery.

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>

<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){
  intTextBox = intTextBox + 1;
  var contentID = document.getElementById('content');
  var newTBDiv = document.createElement('div');
  newTBDiv.setAttribute('id','strText'+intTextBox);
  newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "'    name='" + intTextBox + "'/>"; 
  contentID.appendChild(newTBDiv);
}

  </head>
  <body>
    <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
    <p><a href="javascript:addElement();" >Add</a> 
       <a href="javascript:removeElement();" >Remove</a>
    </p>
    <div id="content"></div>
    <input type="button" value="submit"/>
  </body>
  </html>

after when i click submit button all textbox validation must be done….

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try to copy this and test. And let’s tell me that is as you need.

    <!DOCTYPE HTML>
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>

<script type="text/javascript">
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){
    intTextBox += 1
  var contentID = document.getElementById('content');
  var newTBDiv = document.createElement('div');
  newTBDiv.setAttribute('id','strText'+intTextBox);
  newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "'    name='" + intTextBox + "' />"; 
  contentID.appendChild(newTBDiv);
}

function removeElement(){
    var element = document.getElementById("strText"+intTextBox);
    console.log(element);
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
    intTextBox -=1;
}
</script>
</head><body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement()" >Add</a> 
   <a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>

    See more at My jsFiddle

    Note : working with FireFox & Chrome

    • 0