IE7 does not create additional fields

[aktar]

The code below adds a file field only if no other file field is empty.
The code works as expected in FF and Opera. However in IE7, it will only create one additional field.

Can anyone explain why IE7 refuses to create any more fields?

<script type="text/javascript" language="javascript">

    //initialises the container
    function init() {
        
        container            =     document.getElementById('fieldset_images');
        
    }
    
    //checks if ANY childnode is empty
    function empty(){
    
        var children     =     container.childNodes;
        var count        =    children.length;
        
        for(var i =0; i <count; i++) {
            
            var childval    =    children[i].value;        
            if (childval == "") return(true);
        }
        
        return(false);
        
    }
    
    
    //makes the field
    function createField(){
        
        //checks if any fields are empty
        if (empty()) return;
        
        input = document.createElement("input");
        input.setAttribute("type", "file");
        input.setAttribute("name", 'file[]');
        input.setAttribute("onchange", 'createField();');
    
        container.appendChild(input);
        
    }
    
    
    window.onload = init;
    
    
</script>


<fieldset id="fieldset_images"><input type="file" name="file[]" onchange="createField();" /></fieldset>

[acoder]

There's two problems. One which causes the problem you're having and the other which may cause you problems later.

The one which is the cause of the problem you mention is that IE will not set onchange via setAttribute. You have to set it directly:

input.onchange = createField;

The other bug is that IE does not set the names of dynamically created elements. I don't know if that is a problem in your case.

[aktar]

Thanks for the insight ACODER. I have modified the code so that instead of creating an INPUT element, we create a DIV element. Then we just write the INPUT code in the innerHTML of the DIV element and append to child node array of the container element. That way we can solve the issue of IE7 not being able to set onChange attribute as well as the name attribute.

Thanks for your help

New code:

<script type="text/javascript" language="javascript">

    //makes the field
    function createField(){
        
        var container    =     document.getElementById('fieldset_images');
        
        //checks if any fields are empty
        var children     =     container.getElementsByTagName("input");
        var count        =    children.length;
        
        for(var i =0; i <count; i++) {
            
            var childval    =    children[i].value;        
            if (childval == "") return(false);
        }        
        
        
        //do the do do
        var new_field        =    "<input type='file' name='file[]' onchange='createField();' />";
        
        input                 =     document.createElement("div");
        input.innerHTML        =    new_field;
        
        container.appendChild(input);
    }
    
    
    
</script>

<fieldset id="fieldset_images"><input type="file" name="file[]" onchange="createField();" /></fieldset>

[acoder]

I suppose that's one way of doing it. Glad to see that you got it working.

[irfanagaria1810]

Bingo!!!

Thanks acoder. Your suggestion solved my problem. Thanks for the same
adding the input.onchange = Add; solved my problem. Now it works both in IE and FF. Thanks a TON

[acoder]

You're welcome, and welcome to Bytes!

That's a simple solution. You could also use addEventListene r/attachEvent to add events.