Dynamically Adding and Removing Text Boxes using JavaScript
After many days I was just trying to work with PHP, MySQL and JavaScript yesterday. In one of the page I wanted to add/remove text boxes on demand (or say dynamically) so after much thought and search i found the solution in using JavaScript. Here is the sample of code which I used for my purpose and may also be beneficial for you web developers who wanted to add or remove text boxes dynamically.
It simply uses two functions:
addElement(): It first gets the element id where we want to include a new element followed by creation of new element and appending it inside the element.
removeElement(): It removes the last added new element.
<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>
Just drop me a comment if you have any suggestion, comments or query.
why is this code not running at my computer?
This is simple HTML code with JavScript, I hope you are copying it correctly.
this works fine… but how to read the values of dynamically created textboxes in PHP???
there are possibly many ways I can suggest two simple ways as:
1. Treat the textboxes as array and handle it in PHP.
2. As in above code we are sending name as intTextBox so in PHP page you can loop from 1 to value of intTextBox and gets its value in PHP.
I hope it will help.
Brilliant!
Super! it helped me..Thank you deep!!
Hi Danny! you might copied and pasted the above code as it is I think.. change quotes properly..here the quotes in the above program are looks different..if you observe carefully you can find them..
Change all quotes in proper way then surely you will get result.
It’s working but i can’t read a values enter that dynamicaly generated textboxes. how can i do that? any one help me.
Very simple. But works great! Thanks man!
No IE support, right?
I tested it in IE6+, FireFox and Opera and its working fine.
Nice, it works fine.
thanks!!
Does not work for me. What can i do i added the code as it is.
Hi Utsav,
This is simple HTML code with JavScript, I hope you are copying it correctly.
Also check above Naresh Kumar’s suggestion(comment).
very good i m very thank full to you.
hey its fine, but how to get save all text box values..please let me know.
Ya this is fine, but how to read the values of dynamically created textboxes in PHP??? . please let me know is possible to read the values in PHP?……..
its fine! but how to get save all text box values…
@sumit, @Suresh, @sweety,
there are possibly many ways, I can suggest two simple ways:
1. Treat the textboxes as array and handle it in PHP.
2. As in above code we are sending name as intTextBox so in PHP page you can loop from 1 to value of intTextBox and gets its value in PHP.
I hope it will help.
Nice code, thanks
I have a queestion.
using this code
how to validate this code
like I am making a textbox array.
If i remove first then validate funciton did not work due to total count issue
any help
@zahid: As this code is adding and removing new textbox at the end so total count (intTextBox) can be increased or decreased based on that.