Want to know the script – HTML & Javascript for Adding and deleting form fields dynamically? Copy this code into a .html file and test around it -
Here is the code
<html>
<head>
<title>sample dynamic select list</title>
<script language=’javascript’>
function addVariable()
{
var varGroup = document.getElementById(“variablegroup”);
var rnumber=Math.random();
//alert(‘entered’);
varGroup.innerHTML+=”<div id=\’”+ rnumber +”\’><input type=checkbox name=’deletecb’><input type=text name=textbox><input name=delbt type=button value=Delete onClick=\”javasirpt:deleteThisVar(this);\”</div>”;
//alert(‘after’);
}
function deleteVariable()
{
var elements = document.getElementsByName(“deletecb”);
var variablecount = elements.length;
for (i=0; i< variablecount; i++)
{
//alert(“element at index: “+i);
if (elements[i].checked==true)
{
//alert(“Element at index: “+i + ” Checked”);
//elements[i].parentNode.innerHTML=undefined;
elements[i].parentNode.parentNode.removeChild(elements[i].parentNode);
i–;
}
}
}
function deleteThisVar(obj)
{
//obj.parentNode.innerHTML=”";
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
</script>
</head>
<body>
<form name=”step”>
<div id=’variablegroup’></div>
<input type=button name=”add” value=”Add” onClick=”javascript:addVariable();”>
<input type=button name=”delete” value=”Delete” onClick=”javascript:deleteVariable();”>
</form>
</body>
</html>
Share yoru views by writing in the comments below.
