Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    Setting in a tall corn field in Indiana
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE 5+ Workaround Needed

    I have a simple file extension function (shown below) but I need to use an "onblur" call of my function from a form file input (use this approch because form field is not always visible on the page, so I can't use "onsubmit" because the field will not always be used).

    Now back to my question. IE seems to "lose focus" when the file chooser is displayed. And hence my function executes and as designed in the function an Error message is displayed. I have no problems in any other browsers (Mozilla, FireFox) but my primary audience still uses IE.

    Any help to aleviate this problem in IE would be appreciated.


    JS Function:
    Code:
    function verifyFileType(fieldValue,delimiter,allowExtsArray,alertText,reloadPage){
    
    	if(fieldValue.split(delimiter).length<2){
    		alert("No File Extension Given!\n Please Retry The File Name Again.");
    		return false; 
    	}	
    	var parts=fieldValue.split(delimiter);
    	var lowerCaseParts=parts[1].toLowerCase();
    	var validExt="no";
    
    
    	for (i=0;i<allowExtsArray.length;i++){	
    		if(lowerCaseParts==allowExtsArray[i]){
    			validExt="yes";
    			return; 
    		}
    	}		
    	
    	if(validExt=="yes"){
    			return true; 
    	}		 
    	else { 
    		alert(alertText); 
    			if(reloadPage==1){ 
    				window.location.reload(); 
    			}
    		return false; 
    	} 
    }

    Page Input:
    Code:
    		<form name="fileUploadForm" enctype="multipart/form-data" method="post">
    			<span class="s-txt"><b>Enter Filename</b></span>
    			<input type="file" name="fileName" size="40"
    				onblur="return verifyFileType(this.form.fileName.value,'.',['txt','log'],'Invalid File Type. \n\n Must Be A Text File. With A \(.txt or .log\) Ending.',0)">
    
    			<p><input type="submit" value="Upload File">
    			&nbsp;&nbsp;<input type="reset" value="Clear Form">
    
    		</form>

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hi mate,

    I think this is what you are looking for, it checks the file extension when the form is submitted, with the appropriate alerts if the form input element type is anything other than hidden.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script>
    function checkFileExtension(objFile, arrAllowedExtensions) {
    	var strAlert = "Invalid file type\n\nFile type must end " + arrAllowedExtensions.join(" or ");
    	var strExtension = objFile.value.substring(objFile.value.lastIndexOf("."), objFile.value.length);
    	for( var i=0; i<arrAllowedExtensions.length; i++ )
    		if( strExtension == arrAllowedExtensions[i] )
    			return true;
    			
    	if( objFile.type != "hidden" ) {
    		if( strExtension.length == 0 )
    			alert("Please select a file");
    		else
    			alert(strAlert);
    	}
    	return false;
    }
    </script>
    </head>
    
    <body>
    <form name="fileUploadForm" enctype="multipart/form-data" method="post" onsubmit="return checkFileExtension(this.fileName, ['.txt','.log']);">
    	<span class="s-txt"><b>Enter Filename</b></span>&nbsp;<input type="file" name="fileName">
    	<p><input type="submit" value="Upload File">&nbsp;&nbsp;<input type="reset" value="Clear Form">
    </form>
    </body>
    </html>
    Hope this helps.

    m_n
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    Setting in a tall corn field in Indiana
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks martin,

    But the function I have works great! My problem is I can't use an "onsubmit" in my form (the input will not always be used (hidden until another option is selected) I did not show that part of the code). I need to get around the "false" focus loss of the form field in IE.

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I've updated the script so that if there is no input form element found then the form simply submits. if an input element is found, it validates the extension accordingly. It will only alert messages to the user if an input element is found and it is not a hidden input element (ie if it is type text or file) or it's visibility is hidden.

    I appreciate that your script worked the way you wished it to in the other browsers, however I found it was pumping out the alert boxes every time i was switching windows and doing other stuff on my computer. This is because using onblur() is very indiscriminate in this case. An onsubmit event is much more specific to the task at hand. Plus, of course, your script didn't work for IE

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script>
    function checkFileExtension(objForm, strFileElementID, arrAllowedExtensions) {
    	try {
    		var objFile = objForm.elements[strFileElementID];
    		var strAlert = "Invalid file type\n\nFile type must end " + arrAllowedExtensions.join(" or ");
    		var strExtension = objFile.value.substring(objFile.value.lastIndexOf("."), objFile.value.length);
    		for( var i=0; i<arrAllowedExtensions.length; i++ )
    			if( strExtension.toLowerCase() == arrAllowedExtensions[i] )
    				return true;
    				
    		if( objFile.type != "hidden" || objFile.style.visibility == "hidden" ) {
    			return true;
    		else {
    			if( strExtension.length == 0 )
    				alert("Please select a file");
    			else
    				alert(strAlert);
    		}
    		
    		objForm.reset();
    		return false;
    	}
    	catch(e) {
    		return true;
    	}
    }
    </script>
    </head>
    
    <body>
    <form name="fileUploadForm2" enctype="multipart/form-data" method="post" onsubmit="return checkFileExtension(this, 'fileName2', ['.txt','.log']);">
    	<span class="s-txt"><b>Enter Filename</b></span>&nbsp;<input type="file" name="fileName">
    	<p><input type="submit" value="Upload File">&nbsp;&nbsp;<input type="reset" value="Clear Form">
    </form>
    </body>
    </html>
    This code was tested in IE, Firefox and Opera successfully.

    Hope this helps

    m_n
    Last edited by martin_narg; 06-03-2005 at 04:13 PM.
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    New Coder
    Join Date
    Oct 2002
    Location
    Setting in a tall corn field in Indiana
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks martin_narg, That's what I needed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •