Dynamic Form Field Generation in JavaScript

Ever had the need to create more fields dynamically? For example, consider a form where there is five file uplaod fields. But if the user wants to upload more than five files, they have to upload 5 files first, then come back to that page and agian upload more file. This process would be made much easier if you had added a button that will dynamically add more fields to the form.

The below code will insert more text fields into a form that already has 5 fields in two different categories. I am using a list here - but that is not necessary - you can do it with just a div element.

Codes...

JavaScript Code

//Add more fields dynamically.
function addField(field,area,limit) {
 if(!document.getElementById) return; //Prevent older browsers from getting any further.
 var field_area = document.getElementById(area);
 var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
 //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
 //  field given in the argument is 'friend_' the last id will be 'friend_4'.
 var last_item = all_inputs.length - 1;
 var last = all_inputs[last_item].id;
 var count = Number(last.split("_")[1]) + 1;
 
 //If the maximum number of elements have been reached, exit the function.
 //  If the given limit is lower than 0, infinite number of fields can be created.
 if(count > limit && limit > 0) return;
  
 if(document.createElement) { //W3C Dom method.
  var li = document.createElement("li");
  var input = document.createElement("input");
  input.id = field+count;
  input.name = field+count;
  input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
  li.appendChild(input);
  field_area.appendChild(li);
 } else { //Older Method
  field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
 }
}

HTML Code

<form name="frm" method="POST">
<strong>Friends List</strong><br />
<ol id="friends_area">
<li><input type="text" name="friend_1" id="friend_1" /></li>
<li><input type="text" name="friend_2" id="friend_2" /></li>
<li><input type="text" name="friend_3" id="friend_3" /></li>
<li><input type="text" name="friend_4" id="friend_4" /></li>
<li><input type="text" name="friend_5" id="friend_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('friends_area','friend_',10);" />

<strong>Enemies List</strong><br />
<ol id="enemies_area">
<li><input type="text" name="enemy_1" id="enemy_1" /></li>
<li><input type="text" name="enemy_2" id="enemy_2" /></li>
<li><input type="text" name="enemy_3" id="enemy_3" /></li>
<li><input type="text" name="enemy_4" id="enemy_4" /></li>
<li><input type="text" name="enemy_5" id="enemy_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('enemies_area','enemy_',0);" />
</form>

Demo

I have created a Demo of this example in my site.

See Also

Peter Paul Kosh's Extending forms.

Filed Under...

• javascript
• functions
• web
• development