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>
Do not use document.write, use DOM manipulation instead:
function addTextBox() {
var form = document.frm;
form.appendChild(document.createElement('div')).innerHTML = "<table width=\\"40%\\">"
+ "<tr><td>Name</td><td><input type=\\"text\\" name=\\"txt\\"></td></tr>"
+ "</table>";
}
alex_w747:
Do not use document.write, use DOM manipulation instead:
function addTextBox() {
var form = document.frm;
form.appendChild(document.createElement('div')).innerHTML = "<table width=\\"40%\\">"
+ "<tr><td>Name</td><td><input type=\\"text\\" name=\\"txt\\"></td></tr>"
+ "</table>";
}
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
<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%\\">"
+ "<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>
thanx alex…it is now it is working perfectly fine…thanxxxxx