
i have 4 text box in html page, when i click new it would want to add another 4 like that ,i will go on like this? when i click delete last four buttons want to delete from it. how i can do this using js and php
With Regards pragal

Hi Friend,
Try the following code:
<html>
<script>
function addRow(){
var ptable = document.getElementById('ptablePerson');
var lastElement = ptable.rows.length;
var index = lastElement;
var row = ptable.insertRow(lastElement);
var cellText1 = row.insertCell(0);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText1.appendChild(element);
var cellText2 = row.insertCell(1);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText2.appendChild(element);
var cellText3 = row.insertCell(2);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText3.appendChild(element);
var cellText4 = row.insertCell(3);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText4.appendChild(element);
document.getElementById("psize").value=index;
}
function removeRow(){
var ptable = document.getElementById('ptablePerson');
var lastElement = ptable.rows.length;
if (lastElement > 2) ptable.deleteRow(lastElement - 1);
if(document.getElementById("psize").value>1)
{
document.getElementById("psize").value =
document.getElementById("psize").value-1;
}
}
</script>
<form >
<input type="hidden" name="psize" id="psize">
<table style="border:1px solid #000000;" bgcolor="#efefef"
id="ptablePerson" align="center">
<tr>
<td><input type="text" name="person1" id="person1" size="30" /></td>
<td><input type="text" name="person1" id="person2" size="30" /></td>
<td><input type="text" name="person1" id="person3" size="30" /></td>
<td><input type="text" name="person1" id="person4" size="30" /></td>
</tr>
</table>
<table align="center">
<tr><td><input type="button" value="Add" onclick="addRow();" /></td>
<td><input type="button" value="Remove" onclick="removeRow();" /></td></tr>
</table>
</form>
</html>
Thanks

Hi Friend,
Try the following code:
<html>
<script>
function addRow(){
var ptable = document.getElementById('ptablePerson');
var lastElement = ptable.rows.length;
var index = lastElement;
var row = ptable.insertRow(lastElement);
var cellText1 = row.insertCell(0);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText1.appendChild(element);
var cellText2 = row.insertCell(1);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText2.appendChild(element);
var cellText3 = row.insertCell(2);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText3.appendChild(element);
var cellText4 = row.insertCell(3);
var element = document.createElement('input');
element.type = 'text';
element.name = 'person' + index;
element.id = 'person' + index;
element.size = 30;
cellText4.appendChild(element);
document.getElementById("psize").value=index;
}
function removeRow(){
var ptable = document.getElementById('ptablePerson');
var lastElement = ptable.rows.length;
if (lastElement > 2) ptable.deleteRow(lastElement - 1);
if(document.getElementById("psize").value>1)
{
document.getElementById("psize").value =
document.getElementById("psize").value-1;
}
}
</script>
<form >
<input type="hidden" name="psize" id="psize">
<table style="border:1px solid #000000;" bgcolor="#efefef"
id="ptablePerson" align="center">
<tr>
<td><input type="text" name="person1" id="person1" size="30" /></td>
<td><input type="text" name="person1" id="person2" size="30" /></td>
<td><input type="text" name="person1" id="person3" size="30" /></td>
<td><input type="text" name="person1" id="person4" size="30" /></td>
</tr>
</table>
<table align="center">
<tr><td><input type="button" value="Add" onclick="addRow();" /></td>
<td><input type="button" value="Remove" onclick="removeRow();" /></td></tr>
</table>
</form>
</html>
Thanks

Hi Friend thanks to you , Your code really helps me and i want to do this with an array.
With regards, pragal