Add Input Fields Dynamically to Form Using JavaScript

Here you will get working code for adding input fields dynamically using a link or button. Default number of input fields are provided and you want to give users a option to add more input elements then this script will work. Be it Input box field, Textarea or any other form elements,  it will work the same way.

I will mention two examples here. One will show adding any single element (Input box in my example) and another will show you how to add set of HTML elements. Combined both, modifying the code for specific usages should not be difficult job.

Example: Add Input Box Dynamically using JavaScript

JavaScript code:

<script type="text/javascript">
function validate(frm)
{
	var ele = frm.elements['feedurl[]'];

	if (! ele.length)
	{
		alert(ele.value);
	}

	for(var i=0; i<ele.length; i++)
	{
		alert(ele[i].value);
	}

	return true;
}

function add_feed()
{
	var div1 = document.createElement('div');

	// Get template data
	div1.innerHTML = document.getElementById('newlinktpl').innerHTML;

	// append to our form, so that template data
	//become part of form
	document.getElementById('newlink').appendChild(div1);

}
</script>

HTML Code:

<style>
   .feed {padding: 5px 0}
</style>

<form method="post" action="new_ele2.php" onsubmit="return validate(this)">

<table>
<tr>
	<td valign=top> Feed URL (s):</td>
	<td valign=top>
		<div id="newlink">
			<div class="feed">
			   <input type="text" name="feedurl[]" value="http://feeds.feedburner.com/satya-weblog/scripting" size="50">
			</div>
		</div>
	</td>
</tr>
</table>

	<p>
		<br>
		<input type="submit" name="submit1">
		<input type="reset" name="reset1">
	</p>

<p id="addnew">
	<a href="javascript:add_feed()">Add New </a>
</p>

</form>

<!-- Template. This whole data will be added directly to working form above -->
<div id="newlinktpl" style="display:none">
	<div class="feed">
	 <input type="text" name="feedurl[]" value=""  size="50">
	</div>
</div>

JavaScript function add_feed() is the function which will add Input element dynamically to the working form after clicking in Add new link. Comments inside the function will describe the working of the function. Javascript function validate() is just to show you how you handle the input elements client-side. Inside HTML code, form will show you what was the actual elements available to users and how users can add more input fields if she wants. Template is the hidden data ready to be added to the main form on demand. All the data inside the div id=newlinktpl will be added to the form.

Initial Form:

After Adding one more set of elements:

Dynamically creating form elements (set of element) using JavaScript

Now, I will present another example where the script will add set of HTML elements to the default form. Method of adding the set of elements will be same - user will click on the "Add new" button for adding more data to the form. In the set of elements, one is usual Input Box and another is textarea.

<script>
/*
This script is identical to the above JavaScript function.
*/
function new_link()
{
	var div1 = document.createElement('div');

	div1.innerHTML = document.getElementById('newlinktpl').innerHTML;

	//var test1 = document.getElementById('newlinktpl').getElementsByTagName('table')[0];

	document.getElementById('newlink').appendChild(div1);

}

</script>

HTML for Dynamically creating form elements:

<form method="post" action="">

<div id="newlink">
<div>
<table border=0>
	<tr>
		<td> Link URL: </td>
		<td> <input type="text" name="linkurl[]" value="http://www.satya-weblog.com"> </td>
	</tr>
	<tr>
		<td> Link Description: </td>
		<td>  <textarea name="linkdesc[]" cols="50" rows="5" ></textarea> </td>
	</tr>
</table>
</div>

</div>
	<p>
		<br>
		<input type="submit" name="submit1">
		<input type="reset" name="reset1">
	</p>

<p id="addnew">
	<a href="javascript:new_link()">Add New </a>
</p>

</form>

<!-- Template -->
<div id="newlinktpl" style="display:none">
<div>
<table border=0>
	<tr>
		<td> Link URL: </td>
		<td> <input type="text" name="linkurl[]" value=""> </td>
	</tr>
	<tr>
		<td> Link Description: </td>
		<td> <textarea name="linkdesc[]" cols="50" rows="5" ></textarea> </td>
	</tr>
</table>
</div>
</div>

Screenshot after user has added data and clicked on "Add new" link:

If you link the script and example for dynamically creating text Input then help me sharing the word. Share on delicious or digg this. Subscribe to feed to stay up-to date.

Update: Few developers are feeling difficulty in using data submitted through the form this way, so I am adding these line of codes as a hint.

<?php

if(count($_POST))
{

	$len = count($_POST['linkurl']);

	for ($i=0; $i < $len; $i++)
	{
		echo $_POST['linkurl'][$i] . '<br>';
		echo $_POST['linkdesc'][$i] . '<br>';

	}
}

?>

For more on dynamically working with Form elements check here as well: Dynamically Populate Select List by Ajax or check in Related posts section below.
Update: My code is enough for Admin side or simple form but here is better code. It allows you do delete the extended form element.

Possibly Related posts:

• Select all from textarea/ text input on onclick event
• JavaScript: Default Values in Input Elements
• Javascript show hide div, p, input or any HTML elements