Add or remove textbox on button click

JavaScript
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><textarea name=“msg” id=“message” rows=“5” cols=“40”></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>

2

Do not use document.write, use DOM manipulation instead:


function addTextBox() {
  var form = document.frm;
  form.appendChild(document.createElement('div')).innerHTML = "<table width=\\"40&#37;\\">"
    + "<tr><td>Name</td><td><input type=\\"text\\" name=\\"txt\\"></td></tr>"
    + "</table>";
}
3

thanx for ur reply but still itz not working properly can u send me the whole code along with the modification u have done…thanx in advance

4 

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

function incrementCount() {
	document.frm.count.value = parseInt(document.frm.count.value) + 1;
	addTextBox();
}

function decCount() {
	document.frm.count.value = parseInt(document.frm.count.value) - 1;
	removeTextBox();
}

function addTextBox() {
	var form = document.frm;
	form.appendChild(document.createElement('div')).innerHTML = "<table width=\\"40&#37;\\">"
		+ "<tr><td>Name</td><td><input type=\\"text\\" name=\\"txt\\"></td></tr>"
		+ "</table>";
}

function removeTextBox() {
	var form = document.frm;
	if (form.lastChild.nodeName.toLowerCase() == 'div')
		form.removeChild(form.lastChild);
}

</script>

<body>
<table width="40%" border="1">
<form name="frm">
<tr>
<td>Name: </td>
<td><input type="text" name="count" 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>
5

thanx alex…it is now it is working perfectly fine…thanxxxxx