How to dynamically add/delete text boxes using javascript

We can dynamically insert/delete text boxes in a web page. To do so, we can put text boxes (or any other form element) into a table and dynamically delete the rows of table (or add new rows in table).

<html>
<head>

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

function Delete()
{
document.getElementById("myTable").deleteRow(0);
}

</script>
 

</head>

<body>
<table id="myTable" border="1">
<tr><td><input id="txtcity" name="txtcity" type="text" /></td></tr>
<tr><td><input id="txtcity" name="txtcity" type="text" /></td></tr>
<tr><td><input id="txtcity" name="txtcity" type="text" /></td></tr>
</table>

<br />
<input id="btndelete" name="btndelete" type="button" value="Delete" onclick="Delete();" />
</body>
</html>

To insert a new row in table, we can call insert insertRow(0) function like this (w3schools.com)

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}

In above code, innerHTML is the property we can set with a text, or we can set it with an html tag, like <input type=”text”> etc.

Add a Comment

Your email address will not be published. Required fields are marked *