Add/Remove text control using javascript
[Sunday, May 03, 2009 | 0 comments ]

The following example adds/removes text controls dynamically when you click on  add/remove link.
 
 
 
<html>

<head>

<script type='text/javascript'>

function addTxt(txtSid,startDiv,parentDiv,txtArray){

var count=0;

if(document.getElementById(parentDiv)){

var parentObj=document.getElementById(parentDiv);

var divs=document.getElementsByTagName("DIV");

for(i=0 ; i < divs.length ;i++){

if(divs[i].id.indexOf(startDiv)==0 )

count++;

}

new_count=count;

new_count=count+1;

var addDiv = document.createElement('DIV');

addDiv.id =startDiv+new_count;

addDiv.innerHTML = "<input type='text' id='"+txtSid+new_count+"' name='"+txtArray+"[]' value='"+new_count+"'>

&nbsp;<a href=Javascript:removeTxt('"+addDiv.id+"','"+parentDiv+"');>Remove this text #"+new_count+"</a>";

parentObj.appendChild(adddiv);

}

if(document.getElementById(txtSid+new_count)){

document.getElementById(txtSid+new_count).focus();

}

}

function removeTxt(childDiv,parentDiv){

if(document.getElementById(childDiv) && document.getElementById(parentDiv)){

document.getElementById(parentDiv).removeChild(document.getElementById(childDiv));

}

}

</script>

<title>add text control </title> </head>

<body>

<div id="startDiv">

<input type="text" id="txtName1" name=txtGroup[] value="text1" >

</div>

<span><a href="Javascript:addTxt('txtName','startDiv','parentDiv','txtGroup');">Add a text</a></span>

<div id="parentDiv">&nbsp;</div>

</body>

</html>

Bookmark and Share

0 comments

Post a Comment

Please put your comments here. your questions, your suggestions, also what went wrong with me.