I need to make a form where the user has control on how many items to add. I need to make something like shown on this page.

See how you can click the plus sign next to some of the fields? When you click that, a new input field is created.

Can anyone point me towards a tutorial that shows how to accomplish this? I have googled a bunch today, but am not finding anything.

Thanks!!!
-Stephanie


P.S. I also downloaded the program that I posted as an example, but it is really robust and complex. I don't need all the extra stuff, I just need to know how to add fields dynamically. Besides, I can't even find the source code for creating that type of form in the files I downloaded.

I think this one about adding and removing html elements with javascript has what you nedd.

Hope it helps.

Thanks Steven. I did look at that one, but it didn't do exactly what I wanted. I think I could have modified it, but I went on looking for something else. I found this one and have been working with it. The only problem I am having now is I need to have this in 2 places on the same page. (I need one place for someone to enter a list of materials, and another place for them to enter instructions). I tried changing the names of the variables and functions, but couldn't get it to work.
Any ideas?

Yes, because the script you used is hard coded to use a specific id as container to render the fields. But I second Steven on that one.
The link he sent you is way more versatile.

Look at those lines, it should do what you want:

function createField(_type){
    var o=document.createElement('input');
    switch(_type){
        case 'text':
        case 'password':
        case 'file':
        case 'submit':
        case 'button':
            o.type=_type;
        break;
        default:
            alert('The input type '+_type+' is invalid');
            o=null;
    }
    
    return o;
}

function addField(_type,_name,_id,_class,_parent){
    var trg=document.getElementById(_parent);
    if(!trg){
        alert('Parent element ID '+_parent+' was not found');
        return false;
    }
    var inp=createField(_type);
    inp.name=_name;
    inp.id=_id;
    inp.className=_class;
    
    trg.appendChild(inp);
    return true;
}

All in 30 lines...

To use it, simply call addField() with the parameters you need, and in _parent, give the ID of the container into which that field should be added.
I did not included <select> and <textarea> because they are a bit different from the <input>, but it would be relatively easy to do so.

ahhh, I get it now. I was trying to make a lot of extra work for myself! Using a variable makes a lot more sense. Duh **slaps forhead**
And seeing the code you posted makes a lot more sense now.
Thank you!!

Sounds like you got it working with an assist from Thierry.

It's always best not to hard code things to specific cases. If you can try to make functions general enough for reuse. If you look at the names of the functions they reflect their use.

addField() is clearly named so that you call it anytime you need to add a new field.

If you can try to make functions general enough for reuse

Yeah, I do my best.
I just thrown that code in 2 minutes. The page to test it before pasting here took more time than this logic