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

    Search for Javascript code for getting HTML element in array form.

  • # 2 - by Cmspagnola

    Hmmm I must have messed something up somewhere. It doesn’t output like that for me. I will look into it and see if anything got changed when i was implementing it. Thanks!

    Corinne

  • # 3 - by Jackjones010101

    Mr. Satya, I’ve already used the code that you been updated.Thank you very much on that update. But is the php code of getting the array values are working?

  • # 4 - by Achinlalit

    HI Satya….its a great script…but i am stuck at getting the number of boxes created through javascript. i am trying to get the number of files/images uploaded, depending on that i could run a loop to insert images in different columns in MySQL database. Whole functinality is stuck at getting the number of files/images uploaded. More specifically the php part:

  • # 5 - by Daniel Maier

    Nice stuff.

    Does anybody knows how to use this code dynamically, like in many places in the same page/document, since it relates to a parent div how can I create other parent divs and they could work separately?

    My code is:

    [php]

    var counter = 0;
    var limit = 15;

    function add_field() {
    if (counter == limit) {
    alert(‘É somente permitido ‘ + counter + ‘ campos adicionais.’);
    }
    else {
    counter++;
    var newdiv = document.createElement(‘div’);
    newdiv.id = ‘my_extra_field[‘ + counter + ‘]’;
    newdiv.innerHTML = ‘ remover item‘;
    document.getElementById(‘parent’).appendChild(newdiv);
    }
    }

    function remove_field(elementId) {
    var element = document.getElementById(elementId);
    var parentElement = document.getElementById(‘parent’);
    parentElement.removeChild(element);
    }

    [/php]

    And the HTML code is:

    adicionar novo item

    Thank you!

    • # 6 - by Satya Prakash

      I am not getting your question. Possibly I need to read this when I have more time.

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