Question

I have the following html code :

<form name="uploadForm" action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file_sub[]" />
<input type="file" name="file_sub[]" />
<input type="file" name="file_sub[]" />
<input type="file" name="file_sub[]" />
<input type="file" name="file_sub[]" />
<input type="button" onClick="javascript:submitform();" value="SUBMIT BTN" />
</form>

and here is the javascript function submitform() :

function submitform()
{
var minUpload = 1;
var uploadNo;
var count=document.uploadForm.file_sub.length;
for(a=0;a<count;a++)
        {

           if(document.uploadForm.file_sub.value != '')
               {
                 uploadNo++;
               }

         }

    if(uploadNo > minUpload){   
  document.uploadForm.submit();
    }else{
        alert('Please Upload Atleast ' + minUpload + ' files');
    }

}

the javascript is suppose to validate and make sure atleast minUpload of the the file fields a file inside them.

but for some reason when I try to get the length of the file in the function I get an error (according to the debugger of chrome, I get “Uncaught TypeError: Cannot read property ‘length’ of undefined” ) however I have tried the same thing with checkboxes and it works just fine. What am I doing wrong? is it even possible to do such task in js?

Answer 1

You have to refer to file_sub[]. Fixed function:

var count = document.uploadForm["file_sub[]"].length;

function submitform(){
    var minUpload = 1;
    var uploadNo;
    var files = document.forms['uploadForm']["file_sub[]"];
    var count = files.length;
    for(var a=0; a<count; a++){
        if(files[a].value != ''){
            uploadNo++;
        }
    }

    if(uploadNo > minUpload){   
        document.forms['uploadForm'].submit();
    } else {
        alert('Please Upload Atleast ' + minUpload + ' files');
    }
}