Add form fields dynamically with JavaScript

If you have ever used GMail you have most probably already seen this at the attachments page, where you can dynamically add attachment slots without even refreshing the page. You can achieve this effect easily and I will just show you how to do it.

For the purpose of course, we will use JavaScript, so you should have JavaScript enabled in your browser in order to use this functionality.

First, to have an idea for what I’m talking about, see the demonstration page I’ve setup here:

http://futurepages.net/demos/dynamic-fields/

The page is very simple example of what you can achieve with this script. Although I’ve used a textbox to illustrate it, you might do it with any valid HTML object (i.e select box, checkbox, text, image … etc.) and you are not really limited within the content you might dynamically add that way.

STEP 1: Add the addEvent() function

Let’s start with the head section (I’ve placed the code in the head, but you can place it directly above the div where you will be adding objects, it works just the same). To add an object, you will need to attach the addEvent() function to either a button or a link, which will be clicked by visitors. The addEvent() function itself:

function addEvent()
{
var ni = document.getElementById(’myDiv’);
var numi = document.getElementById(’theValue’);
var num = (document.getElementById(”theValue”).value -1)+ 2;
numi.value = num;
var divIdName = “my”+num+”Div”;
var newdiv = document.createElement(’div’);
newdiv.setAttribute(”id”,divIdName);
newdiv.innerHTML = “ADD-YOUR-CODE-HERE”
ni.appendChild(newdiv);
}

Basically, what this code do is a simple update of the div you will create at the end of this page. It uses a hidden variable with ID theValue (which is also initialized later in this page) to keep track of the number of added items, so you can delete them later (or use that number to give a unique name). Note that this variable is NOT submitted with the form as it doesn’t really have its own name but instead it is just an ID.

You will need to edit the code and add your HTML item in the “ADD-YOUR-CODE-HERE” section. This will be the code that will be added each time the button/link is clicked.

STEP 2: Add the removeEvent() function

To be useful, we will need a remove function, which will allow our visitors to actually remove the added item. The remove function itself is much simplier:

function removeEvent(divNum)
{
var d = document.getElementById(’myDiv’);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

There is nothing fancy about it – just copy and paste it right after the addEvent() function.

STEP 3: Add the HTML code

The final step is to add the code which will hold our new items, along with the add button/link:

<input type="hidden" value="0" id="theValue" />
<p><input type="button" onclick="addEvent();" value=" Add Field "></p>
<div id="myDiv"> </div>

Now load your page in your browser and you should be able to see it in action.Once again, this is quite simple example of what you can achieve with these functions and it is all up to you to add more functionality to them.

And before even trying to say: “Hey! You are great.” or “That sucks”, please note that it wasn’t me who first thought of this – I just …. borrowed it from somewhere. The fact is, I don’t really remember where from, so if you happen to know the person, please let me know so I can give proper credits.