Adding HTML elements on click of a button

Upasana Shukla / March 16, 2013

When I was working on my college project, I wanted to add textfields on click of a button, at first, I used innerHTML=”…” for doing that, but it didn’t work and I did it like this(credits to Ashish Shukla ):

<html>
<head>

<script type="text/javascript">
var i = 3;

function addField(tableid)
{
   var row = document.createElement("tr");
   var col1 = document.createElement("td");
   var col2 = document.createElement("td");
   var input = document.createElement("input");

   input.setAttribute("type","text");
   input.setAttribute("name","field" + i );

   col1.appendChild(document.createTextNode("Field" + i));
   col2.appendChild(input);

   row.appendChild(col1);
   row.appendChild(col2);

   var table = document.getElementById(tableid);

   table.appendChild(row);
   i++;
}

</script>

</head>
<body>

<form name="myform" action="myfile.php" method="post" id="myform">
<table id="fieldTable">

<tr><td>Field1 : </td><td><input type="text" name="field1" /></td></tr>
<tr><td>Field2 : </td><td><input type="text" name="field2" /></td></tr>
</table>
<table>
<tr><td><input type="button" value="Add field" id="button"  onclick="addField('fieldTable')" /></td>
<td><input type="submit"/></td></tr>
</table
</form>
</body>
</html>

Leave a comment Cancel reply