add and remove textbox on button click

user_123 · Joined: 30 Jun 2008 Posts: 1

Hi all,
I want to add or remove textbox on button click and i am succeded in doing that....but the only problem is whenever i click on add or remove button the textbox get added/removed on new page instead on the same page....so how can i do that thing so that on bttn click it gets added on same page..here is my code............

<html>
<head>
<script language="javascript" type="text/javascript">

function incrementCount()
{
document.frm.txt.value=parseInt(document.frm.txt.value) + 1;
addtxtBox();
}

function decCount()
{
document.frm.txt.value=parseInt(document.frm.txt.value) - 1;
addtxtBox();
}

function addtxtBox()
{
//var count=10;
var b="";
var a=document.frm.txt.value;

for(var i=1;i<=a;i++)
{
document.write('<table width="40%">');
document.write('<tr><td>Name :</td>');
document.write('<td><input type="text" name="txt"></td></tr>');
document.write('</table>');

}

</script>

<body>

<table width="40%" border="1">
<form name="frm">
<tr>
<td>Name:</td>
<td><input type="text" name="txt" value="0" readonly ></td>

<td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
<td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>


</tr>

</table>

</form>
</body>
</html>