Adding HTML elements on click of a button

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 Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s