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:
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:
After Adding one more set of elements:
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.
Possibly Related posts:
