Adding new fields to a form on the fly

[simontheak]

Hiya - thanks for taking the time to read this.

I'm working on what is currently a simple form, which will include a list of the users friends. However, seeing as everyone's going to have a different number of friends to submit, I'd really like to just have 1 "Friend" field and a button to "Add another friend" next to it.

The idea is that when someone clicks on the "Add Friend" button, another text field will appear (with another Add button), allowing the user to input more contact details.

I think I'm right in saying that I'd need JavaScript to do this, but other than that I really don't have any idea.

Would somebody be able to let me or know? Or post up a link to a relvant tutorial?

Thanks very much,

[mhulse]

Hi,

Maybe something like this?

I am sure that script could be updated to be less obtrusive, but it should be a good starting point for your needs.

Good luck!
Cheers,
M

[Jeanco]

That example does describe it in a more complicated way. The idea here is that you're using the Document Object Model (DOM) to add more fields.

It may take a bit of reading on your part to get familiar with is. Here is a good spot to start: http://www.w3schools.com/htmldom/dom_reference.asp

Also, an article from here at Sitepoint: http://www.sitepoint.com/article/dht...ern-web-design

[SimplyFu]

maybe something like

input = document.createElement('INPUT');
input.type = 'text';
input.name = 'form-name';
$('formid').appendChild(input)