| |
We can create Input boxes dynamically in html page. |
| Sample Code: |
| |
Step 1:Copy and past the java script code in head tags of the html. |
|
<![CDATA[
<script language="javascript">
//add a new row to the table
function addRow()
{
tabBody=document.getElementsByTagName("TBODY").item(2);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD")
textnode1=document.createElement("input");
textnode1.name="specification[]";
textnode1.type="text";
textnode3=document.createElement("input")
textnode3.value="Delete";
textnode3.type="button";
textnode3.onclick=function (evt) {removeRow(this);}
cell1.appendChild(textnode1);
cell3.appendChild(textnode3);
row.appendChild(cell1);
row.appendChild(cell3);
tabBody.appendChild(row);
}
//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked. to get a reference to the
containing <tr> element, get the parent of the parent (in this case case <tr>)*/
var oRow = src.parentNode.parentNode;
//once the row reference is obtained, delete it passing in its rowIndex
document.all("tblComputer").deleteRow(oRow.rowIndex);
}
</script>
]]>
|
| |
Step 2:Copy and past the below the code in body of the html. |
|
<![CDATA[
<form name="thisform" action="save_computer.php" method="POST">
<table id="tblComputer" width="78%" align="center" border=0>
<tbody>
<tr>
<td align="left"><h5>Specifications</h5></td>
</tr>
<tr>
<td><input type="text" name="specification[]"/></td>
<td><input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="specification[]"/></td>
<td><input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="specification[]"/></td>
<td><input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
</tbody>
</table>
<table align=center>
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td colspan="3"> <input type="button" value="Add Specification Field" onclick="addRow();" />
<input type="submit" name="submit" value="Submit to create Computer" />
</td>
</tr>
</table>
</form>
]]>
|
| |