Dynamically adding text box using javascript

Some times we need to add text box dynamically in a web page.

For example, assume that our web page is having option to add email id of many friends.

It is very difficult to judge how many friends will be there for each person.
So we can provide few text boxes (e.g 3) for entering email id when loading the page and we need to provide a button for adding more text boxes if required.

Javascript can be used for adding more text boxes without doing page refresh.

Find below an example. If you click “Add Inputbox” button a new input box will be added.

The code used for doing above example is as below

<script language="javascript">
function addRow()
{
tabBody=document.getElementById(&quot;inputtable&quot;);
row=document.createElement(&quot;TR&quot;);
cell1 = document.createElement(&quot;TD&quot;);
textnode1=document.createElement(&quot;input&quot;);
textnode1.name=&quot;inputbox[]&quot;;
textnode1.type=&quot;text&quot;;

cell1.appendChild(textnode1);
row.appendChild(cell1);
tabBody.appendChild(row);

}
</script>

<form name="" action="" method="post">
<table border="0" width="100%">
<tbody id="inputtable">
<tr><td><input type="text" name="inputbox[]" /></td></tr>
</tbody>
</table>

<table border="0" width="100%">
<tr>
<td><input type="button" value="Add Inputbox" onclick="addRow();" /></td>
</tr>

</table>
</form>

You can see demo of this example here http://qualitypoint.blogspot.com/2009/05/dynamically-adding-text-box-in-web-page.html

And also you can see real time examples for this code here http://qualitypointtech.net/twitter_application/twit-info/add_twit.php and http://qualitypointtech.net/sitesearch/multikeyword.php

You can refer this link http://qualitypointtech.net/forum/viewtopic.php?f=25&t=3251 for how to add textbox dynamically using jQuery. Here we discussed fully.

Posted in Javascript