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 zapdude

    leading on from this, how do I now take the data from the dynamically created input fields and insert them into a mysql database?

  • # 2 - by Satya Prakash

    whats problem. It is added dynamically in form. If you submit the form then you will see all those elements submitted also.

  • # 3 - by zapdude

    well for instance, I want to insert each newly created input field on the form as seperate records in a database table. So the table might be called “linktable” and may have a field named “anewlink”, with another primary key setup so that it auto increments.

    So i have changed the form action to point to a PHP script. In this PHP script, I have this line to get the form inputs:

    $feedurl=($_POST['feedurl[]']);

    now i have this line to insert it into the database:

    $sql=”INSERT INTO linktable (anewlink) VALUES ('$feedurl')”;
    $result1=mysql_query($sql);

    But when i check my table after submitting, it only shows that one blank record has been added, even though i have submitted multiple inputs from the form.

    Could you please give any advice on how to make this work. This would be most appreciated. Thanks

  • # 4 - by Satya Prakash

    Check using $_post['feedurl']. It should give u array

  • # 5 - by Satya Prakash

    Check using $_post['feedurl']. It should give u array

Comment pages
1 2 3 10 1641
Comments are open for an year period. Please, write here on Facebook page.