Last day, I fad to open my last archive bout programming use javascript in ma disc. I found an interesting stuff there.. Yeah for ’bout 5 months ago i search a method to add a form component that i’ll used in ma friend project .
Just try to look it at a glance .. it seems daunting i thougt. But when we see it accuratelly, we can get the algorthm of its code that not complicated as we expect. See jvscript below :
<script type="text/javascript">
function addElemen(list,jumlah,nama)
{
var currNumArea=document.getElementById(jumlah);
var divToAddArea=document.getElementById(list);
num= currNumArea.value;
num++;
currNumArea.value=num;
var newDiv=document.createElement('div');
var tmpNama=nama+num;
newDiv.setAttribute('id',tmpNama);
var ePengalaman="<table width=\"100%\"><tr><th id=\"blue\">Object #"+(num)
+"</th></tr><tr><td><input type=\"text\" name=\""+tmpNama+
"\" size=50 style=\"width:80%\">";
newDiv.innerHTML=ePengalaman+" <a href=\"javascript:;\" onClick=\"
deleteElemen(\'"+list+"\',\'"+tmpNama+"\')\" id=\"delete\">
<strong><font color='Maroon'>Delete</font></strong></a></td>
</tr><tr><td> </td></tr></table>";
divToAddArea.appendChild(newDiv);
}
function deleteElemen(list,idElemen)
{
var divListArea=document.getElementById(list);
var oldDiv=document.getElementById(idElemen);
divListArea.removeChild(oldDiv);
}
</script>
And here they are the HTML code to call the function :
<html>
<head><title>Add Object</title></head>
<body>
<a onclick="addElemen('list_object','jumlah_object','object_')"
href="javascript:;" id="add"><font color="Maroon"><strong>Tambah Object
</strong></font></a>
<div id="list_object">
<input type="hidden" name="jumlah_object" value="<?=$num;?>">
</div>
</body>
</html>
hmm but i still rather confuse, the numeric iteration can’t decreased when we delete a component. is there anyone can figure it out for me