DHTML updating attributes

programming web dev
1

[COLOR=#222222]Hi,

I am creating a CMS form for creating polls (for voting), and I want to be able to dynamically add or remove additional text fields so the user can input more or less poll options.

The output looks something like the following:

And some code:


// upon page load, initialize the last option to the number 2, since we initially display two permanent options
var globalLastOption = 2;


function addOption() {
    // cap the number of options at 8
    if (globalLastOption < 8) {
        globalLastOption++;

        // create the new text field, with appropriate label and a clickable remove link
        var elem = document.getElementById("moreOptionsPlaceHolder");
        var out = "";

        out += '<div id="option'+globalLastOption+'Div" class="doubleColLP">';
        out += '<div class="col1">Option '+globalLastOption+':</div>';
        out += '<div class="col2">';
        out += '<input name="option'+globalLastOption+'" type="text" />';
        out += '<a class="minus" style="margin-left:10px" onclick="removeOption('+globalLastOption+')">Remove</a>';
        out += '</div>';
        out += '</div>';
        out += '<div class="clear"></div>';
        
        // add it to the list of options
        elem.innerHTML += out;
    }
}


function removeOption(optNum) {    
    // "erase" this element
    document.getElementById("moreOptionsPlaceHolder").removeChild(document.getElementById("option"+optNum+"Div"));
    
    // update the options below this one, so they have proper option numbers set
    for (var i = (optNum+1); i <= globalLastOption; i++) {

        var optionDiv = document.getElementById("option"+i+"Div");

        // 4 changes:
        optionDiv.id = "option"+(i-1)+"Div"; // 1. div id
        optionDiv.childNodes[0].innerHTML = optionDiv.childNodes[0].innerHTML.replace('Option '+i, 'Option '+(i-1)); // 2. col1 text
        optionDiv.childNodes[1].childNodes[0].name = 'option'+(i-1); // 3. input name
        
        // referenced http://stackoverflow.com/questions/95731/why-does-an-onclick-property-set-with-setattribute-fail-to-work-in-ie
        optionDiv.childNodes[1].childNodes[1].setAttribute('onclick', 'removeOption('+(i-1)+')'); // 4. javascript function call (for non-IE)
        optionDiv.childNodes[1].childNodes[1].onclick = function () {removeOption(i-1)}; // 4. javascript function call (for IE)

    }


    globalLastOption--;
}

Where I get a bug is when I click to remove any of the option with a lower number than others (ie. I click to remove “option 3” when “option 4” is present). It removes the text field fine, and even appears to update the other fields and attributes like the onclick method, as I would expect it to (I used Chrome’s debug tool to inspect the elements afterwards).

However, when I click to remove one of those now renamed fields, the optNum passed to the removeOption function is set to the number of globalLastOption, regardless of which “remove” link I click. So it seems as though the elements weren’t updated properly.

What makes it more confusing, is that when I click to add a field after such an error, I am able to remove whichever field I want again!

Hopefully my explanation wasn’t too confusing.

Please let me know where I need to fix the code. Thanks.

icekube12jr.[/COLOR]