'dynamically create\remove textbox

I want to dynamically create\remove textbox . I have a code. I have two file. One html file and other is java script file. Here is my code:

<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);
            }
            //FUNCTION TO REMOVE TEXT BOX ELEMENT
            function removeElement()
            {
                if(intTextBox != 0)
                {
                    var contentID = document.getElementById('content');
                    contentID.removeChild(document.getElementById('strText'+intTextBox));
                    intTextBox = 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>
    </body>
</html>

I want to split this code so that I can write all function in javascript and I want to write this text box code <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>"; in my html file so that I can use this textbox id to fetch value in compose email since it takes value from textbox id from html pages. Please help.

javascript

Solution 1:^[1]

If all you're after is moving the code to a different file, then you basically pull the stuff from in-between script tags into a new file then update your script tag to: <script type="text/javascript" src="newfile.js"> /* stuff here was moved to the new file*/ </script>

If you also want to make the function work for any textbox, then update the declaration to

function addElement(elementId)

and then use that instead of the hard-coded string when getting the element.

Solution 2:^[2]

If you want to split your script from your HTML code, you can use the following snippet

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);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
  if (intTextBox != 0) {
    var contentID = document.getElementById('content');
    contentID.removeChild(document.getElementById('strText' + intTextBox));
    intTextBox = intTextBox - 1;
  }
}

<html>

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

</head>

<body>
  <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
  <p><a href="#" onclick="addElement()">Add</a> <a href="#" onclick="removeElement()">Remove</a></p>
  <div id="content"></div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Lokesh Suman

'dynamically create\remove textbox

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]