Question

So as the title says I’m trying to add input tags to a form I have based on a dropdown selection. This is what I have so far:

HTML FORM:

<form action="/next" method="POST" > 
    <select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <div id="count">
        <p>
            <div id="something">
                <input type="text" name="text" value="" >
                <input type="text" name="othertext" value="" >
            </div>
        </p>
        <span id="Room"></span>
    </div>
    <input type="submit" value="Next" >
</form>

And then the Javascript that is doing what I want:

function dropdownlist(listindex) {

    document.Room = 0;
    switch (listindex) {

    case "1":

        var check = document.getElementById('added');
        if (check != null) {

            element = document.getElementById('added');
            element.parentNode.removeChild(element);

            element = document.getElementById('added');
            element.parentNode.removeChild(element);

            element = document.getElementById('added');
            element.parentNode.removeChild(element);


        }

        break;

    case "2":


        var check = document.getElementById('added');
        if (check == null) {

            var counter = 1;

            var newFields = document.getElementById('something').cloneNode(true);
            newFields.id = 'added';
            var newField = newFields.childNodes;
            for (var i = 0; i < newField.length; i++) {

                var theName = newField[i].name
                if (theName) newField[i].name = theName + counter;
            }
            var insertHere = document.getElementById('Room');
            insertHere.parentNode.insertBefore(newFields, insertHere);

        }

        else {
            var id = document.getElementById('count');
            var countid = id.getElementsByTagName('p')
            var number = countid.length;

            if (number == 3) {
                element = document.getElementById('added');
                element.parentNode.removeChild(element);
            }​

    }​

Now this is all working quite nicely, there might be better ways of doing this but as I really have little experience with javascript it’s been the best I’ve managed to do. Now the problem is this: If a user added 3 elements and then decided to actually go back to 2, I had to run a check on how many tags where added, the solution I came up with required me to add a < p> tag around each element created on top of a div so I could select all the < p> tags within the div and then delete the required amount of tags.

This solution was good but then I noticed that this messed up with an earlier part of my code where I changed the name of each input tag to something unique, which is something I need to store the information in the form.

So can anyone suggest me a different workaround to achieve this functionality? add and delete input tags based on user selection while keeping unique names for all tags? Any help at all would be greatly appreciated!

Answer 1

Is your maximum number of input elements small? If so, you might consider incorporating all of them on the page up front, and then enabling them or setting their visibility as needed:

document.form1.text1.disabled = true;              // or false

document.form1.text1.style.visibility = "hidden";  // or "visible"

This requires first naming your form and your input elements:

<form name="form1" ... >

<input type="text" name="text1" ... >
<input type="text" name="text2" ... >

This approach is much simpler than manipulating the DOM via insertBefore(),removeChild(), etc.