Comments on: Dynamically add form fields using javascript and DOM with dynamic post method

By: DaijoubuKun

DaijoubuKun — Tue, 06 Apr 2010 22:44:01 +0000

As previously noted I DO NOT have a remove field script. A friend tells me he has one, he has yet to provide me the code as there are some issues he would like to resolve. As soon as I have it I will post it.

By: afwan auliyar

afwan auliyar — Tue, 06 Apr 2010 12:08:57 +0000

thanks for this tutorial …
Is there a script for “remove” this field which “add” before ?!?

By: Cameron Graeter

Cameron Graeter — Wed, 10 Mar 2010 17:54:47 +0000

No joke you know what you are talking about , thank you

By: DaijoubuKun

DaijoubuKun — Sat, 06 Mar 2010 20:13:51 +0000

At this time I have found the code I have on this post has issues when you try to remove. A friend of mine says he has a version where you can remove. He hasn’t given it to me yet as there are a few kinks (as in it doesn’t work with some web browsers) As soon as I have a good working version I will modify this post to inform everyone, and write up a new post explaining how it works.

By: Kazi

Kazi — Sat, 06 Mar 2010 04:03:41 +0000

Hi there,

I really found your code useful for my own purpose. However would you be able to provide the “Remove” script to delete the fieldsets created?? thanks.

By: jim

jim — Sun, 27 Dec 2009 16:07:31 +0000

hi, am really new in javascript but i wanted to post this one as it worked when i tried it.. it removed the newly added field.

just add this code:

in the div with id “add_phone”

By: Maxcim

Maxcim — Sat, 26 Dec 2009 22:41:06 +0000

Hi,

first of all thank you for the script. I was looking for this.

I have only one question:
Why does this work:

Naam:
Geboorteplaats:
Geboortedatum:

But this doesn’t:

Naam:
Geboorteplaats:
Geboortedatum:

If i put the form in a table, only the data from the first div is send but not the data from the second div, .

Thank you

By: sch

sch — Fri, 25 Dec 2009 12:51:56 +0000

Many thanks DaijoubuKun. However I still can’t get it work. Could you tell me how I can post my code here so you can see what is wrong.

Let me try to put my code here:

`
"


var counter = 0;
function add_child() {

    counter++;

    var newFields = document.getElementById('add_child').cloneNode(true);
    newFields.id = '';

    newFields.style.display = 'block';

    var newField = newFields.childNodes;

    for (var i=0;i
        var theName = newField[i].name

        if (theName)
                newField[i].name = theName + counter;

}
        var insertHere = document.getElementById('child');

        insertHere.parentNode.insertBefore(newFields,insertHere);
}
var compter = 0;
function add_member() {

    compter++;
    var newFields = document.getElementById('add_member').cloneNode(true);

    newFields.id = '';

    newFields.style.display = 'block';

    var newField = newFields.childNodes;

    for (var i=0;i
        var theName = newField[i].name

        if (theName)

                newField[i].name = theName + compter;
        }

        var insertHere = document.getElementById('add_member');

        insertHere.parentNode.insertBefore(newFields,insertHere);

}
	Member: 
	Member:

"
`

By: DaijoubuKun

DaijoubuKun — Thu, 24 Dec 2009 23:49:03 +0000

Add this code inside the var for statement just before the close bracket. It’s not the best solution, but it should work.

var theName = newField[i].id
if (theName)
     newField[i].id = theName + counter;

By: sch

sch — Thu, 24 Dec 2009 13:29:27 +0000

Could you please advise how I can dynamically add a form inside which I’m also able to add dyncamic fields. For e.g: I want to collect info of Members. i don’t know in advance how many people. i want to have a button say: ‘add more member’. In side a member form i also want to collect info of his/her children, so i need to have a button say: ‘add more kid’. Something looks like:
—–
Member #1:
Name:…
Kid#1….
Button(Add more kid)
Button(Add more member)
——

I’ve tried do something similar:
—–

..what displayed as default..

….

..what displayed as default..

….

——

I was able to generate new Member form let say Member# 2, 3, 4….But my problem is that when I click the button ‘add more kid’ in side the new generated Member# 2,3,4… form the new fields are always generated in the Member#1 form. The document.getElementById(add_child) always refers to the first div not cloned one for the Member# 2,3,4…..

Could you please guide me to solve the problem.

Thanks for your help.
sch.