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.

Screenshot after user has added data and clicked on "Add new" link:
Add Input Element Dynamically using JavaScript

Another Example:

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.

Update (25-07-2010): Few developers have taken extra pain and commented here requesting to provide functionality for deleting the newly set of elements. Those developers could not got the benefits as I have taken time to update but new visitors here like you got the benefits. I have added the delete functionality to the script. In the process, I have touched only JavaScript code. Hope I have not destroyed it!

<script>
/*
This script is identical to the above JavaScript function.
*/
var ct = 1;
function new_link()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '<div style="text-align:right;margin-right:65px"><a href="javascript:delIt('+ ct +')">Del</a></div>';
	div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
// function to delete the newly added set of elements
function delIt(eleId)
{
	d = document;
	var ele = d.getElementById(eleId);
	var parentEle = d.getElementById('newlink');
	parentEle.removeChild(ele);
}
</script>

HTML for Dynamically creating form elements:

<style>
   #newlink {width:600px}
</style>
<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>

Initial Form:

Dynamically add HTML elements to form on click

After Adding one more set of elements:

Screen-shot after user clicked the Add new link

If you like the script and examples for dynamically creating and deleting 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: More on Adding Input fields dynamically on quirksmode here.

  • # 1 - by Satya Prakash

    I have added the delete functionality to the script.

  • # 2 - by letmein

    hi, mt satya. GoodDay!

    Thanks for this enhancement, It really helps a lot.

  • # 3 - by Cmspagnola

    Thank you for this script. It really helped me out with a project I was attempting at work. I was wondering though, do you know how I would be able to get the fields to group themselves together in an email as I have them grouped on my contact form.

    Each time new fields are added, the email simple lists each field one after another, because they are in an array. I want them to group in their designated groups (link url and link description listed one after another in a group, and then the next added fields listed together the same way instead of it being listed like: link url, link url, link description link description.)

    I know there is some sort of merge and sort functions in arrays that could probably do this, but I am fairly new to all of this and don't know how to do it and I can't understand most of the sites that tell me how (nor do I know if this is even what I need). Would there be a way to link the arrays in each group so that they list themselves in an email as they should be?

    If you can't or don't have the time to help, no worries. I simply decided to try here while working through other methods.

    Corinne

  • # 4 - by Satya Prakash

    As I understand you want to group the fields like:
    link1, desc1
    link2, desc2, etc
    So what is the problem! The PHP code mentioned here will output the fields
    like that!
    You can try to add variation to the PHP code. You know that it is in an
    array.
    So, take link and desc at index 1, then at index 2 etc.

  • # 5 - by Gumuruh S

    but when we done adding a new HTML component into it
    via javascript… the problem next is the validation part.

    Since we're executing another Javascript
    to validate the new added component, it seems impossible to be checked!

    try it out!
    I haven't got the answer even until now.
    Sadly,,,

    only the existing component that could be validated via javascript.

    Newly added component can't be validated… sigh. 🙁

Comment pages
1 5 6 7 8 9 10 1641
Comments are open for an year period. Please, write here on Facebook page.