View Full Version : Adding Form Fields on The Fly

08-31-2007, 02:27 PM
Hey Guys,

I have a basic form with a contact listing. I want to be able to hit "+" for example somewhere on the form, where it then displays (fades in, adds in, however) a duplicate of say three fields. The rows would look something like this:

Contact Name: Contact Address: Contact Phone
Contact Name: Contact Address: Contact Phone
Contact Name: Contact Address: Contact Phone

In theory, you could also select a "-" button to remove a contact listing if you accidentally added too many. Basically it could be adding and removing div's on the fly.

Any idea how I could do this with? Any suggestions would be appreciated.


09-01-2007, 12:43 PM
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

function add()
var bdiv = document.getElementById('myDiv');
var noi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
noi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.style.border = "dashed 1px";
newdiv.style.marginBottom = "10px";
newdiv.innerHTML = "<br />Contact Name: <input type='text' name='conName' /><br /><br />Contact Address: <input type='text' name='conAddress' /><br /><br />Contact Phone: <input type='text' name='conPhone' /> <input type='button' onclick=\"remove(\'"+divIdName+"\')\" value='-'><bR><br>";


function remove(divNum)
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);


<input type="button" onClick="add();" value="+">
<input type="hidden" value="0" id="theValue" />

<div id="myDiv"> </div>


Hope this helps!


09-04-2007, 04:19 PM
That's great! I'll work with it. Thanks so much.

10-25-2007, 07:43 PM
So this works great, in IE. When trying to use it in FF, it doesn't do anything. There are no JS errors; it just doesn't respond on click.

Any thoughts on why this might be happening?


10-26-2007, 02:44 PM
I'd like to say it's an innerHTML issue, but I have other examples of that which work in FF ..


10-26-2007, 04:35 PM
Nevermind. Got it working.