|
Adding TextBox Dynamically using Java Script |
The following example shows how to add text to html through Java Script. See the html code and the function used.
Code
<html>
<head>
<script language=javascript>
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1 + 2);
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type=text id=' + num + ' value=' + num + '><a href="javascript:remove('+divIdName+')">Remove</a>';
ni.appendChild(newdiv);
}
function remove(dId) {
var ni = document.getElementById('myDiv');
ni.removeChild(dId);
}
</script>
</head>
<body>
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:addElement()" >Add TextBox</a></p>
<div id="myDiv"></div>
</body>
</html>
Expalnation
When user clicks the link 'Add TextBox' java script function addElement is called. The html hold a hidden input type to hold the numeric id of last textbox created. In the starting it will be 0. Each newly created textbox should have a unique ID so that when the form is submitted, value for each textbox can be obtained on the server using ASP or PHP.
Now lets see the function
First it will get the div to which newly created element should be added.
var ni = document.getElementById('myDiv');
Then it will get the element that holds the numeric unique id for new elements. Then it will get the number for new element and assign it to the value holding element
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1 + 2);
numi.value = num;
So now the variable num has the new numeric value to be assigned to the new element. See that the element value is also updated.
You may be confused with why the above code has -1 + 2. This is to force the script to do numeric addition instead of concatenation of string. -1+2 is 1 so its same as (document.getElementById('theValue').value +1) but if we use this instead of addition concatenation take place. like first time num will be 0, then 01, then 011 so on. To avoid this and to force numeric addition we use - inbetween and get the result we need.
Now we create a new div element which hold the new textbox. See that how we assign unique id to the new div and text box.
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type=text id=' + num + ' value=' + num + '><a href="javascript:remove('+divIdName+')">Remove</a>';
The html code for Textbox is generated and it also have a <a> tag which calls the function to remove that particular textbox. For removing we pass the unique id to the function.
At the end we just append the newly created div to the main div in the html code body tag.
ni.appendChild(newdiv);
Removing part just get the main div from and remove the child. The id of the div tag to be removed is passed to the function.
Hope that this code helped you. You can replace textbox and put in any component you need.
|
|
Author: J.J |
|
Send any comments at:
|
