Javascript remove/addChild problem in IE

Question

Hello. I've got an HTML page with a select and another control. I want the type of the second control to dynamically change depending on the value selected in the first control. Here's the html code:

<form name="myForm">
    <select name="tagName"
        onChange="changeControl(document.myForm.customControl, document.myForm.tagName.value, getSelectedText(document.myForm.tagName));">
        <option  value='F'>Create Input</option>
        <option  value='E'>Create Select</option>
        <option  value='M'>Create Multiple Select</option>
        <option  value='N'>Create Not Editable</option>
        <option  value='C'>Create Configuration Param</option>
        <option  value='D'>Create Date</option>
        <option  value='X'>Create Unknown</option>
    </select>

    <br>
    <br>

    <div>
        <input type="hidden" name="customControl" />
    </div>

The javascript function basically removes the old control, and adds a new one. It currently works in Firefox, but not in Internet Explorer. Here's the code.

function changeControl(oldControl, valType, tagName)
{
var newControl;

var controlParent = oldControl.parentNode;
var controlName = oldControl.name;

controlParent.removeChild (oldControl);

switch(valType) {
    //IE does not allow name attr to be set later,
    //so we must use name at creation time;
    //this way of doing things breaks non-IE browsers
    //TBD: surround it with try-catch block
    case 'F':
        //newControl = document.createElement('input'); //non-IE
        newControl = document.createElement('input name=' + controlName);
        newControl.size = 30;
    break;

    case 'E':
    case 'M':
        newControl = document.createElement('select name=' + controlName);
        if (valType == 'M')
            newControl.multiple = "multiple";

        var optionStr = sampleArr[tagName];
        optionArr = optionStr.split(';');

        var optCount = 0;
        for (i in optionArr) {
            option = optionArr[i];
            newControl.options[i] = new Option(option, option);
        }
    break;

    case 'N':
    ...    

    default:
        //unrecognized type
        newControl = document.createElement('input name=' + controlName);
        newControl.value = "Unrecognized control type";
        newControl.size = 30;
        newControl.style.border = "0px";
        newControl.disabled = "disabled";
        //newControl.readonly = "readonly";
}


//newControl.name = controlName; //non-IE
controlParent.appendChild (newControl);
}

function getSelectedText(selectObj)
{
    return selectObj.options[selectObj.selectedIndex].text;
}

On the second call to changeControl, oldControl seems to having lost all attributes. Notice the last changes trying to dynamically set name attribute in IE.

Could anyone help me find out why this is broken?

Answer 1

I'm a big advocate of jQuery; look at using this for you code, it allows for unobtrusive javascript and simplification of code (and it has cross-browser compatibility for free).

for example, I can select the parent of the control object by using:

var parent = $(control).parent();

then there is a lovely comand called replaceWith

which allows me to write:

parent.replaceWith("<input type='text' />");

This single line will replaced the entire content of the element to what ever you want.

Answer 2

FYI, I resolved the issue using ids instead of names. Function becomes:

function changeControl(controlId, valType, tagName)
{
    var oldControl, newControl;

    oldControl = document.getElementById(controlLabel);
    ...

    newControl.id = controlLabel;
    controlParent.appendChild (newControl);
}