JavaScript IE incompatability using in html a var set in a js file

**mrhoo** · Aug 14 '08, 04:32 AM

Where do you define fReq, before you refer to it's members- fReq[0], etc?

**Jabica** · Aug 14 '08, 02:28 PM

fReq is define on the first line in th formfunction.js which is tagged in the html in the <head> section.

I set the fReq[0]..etc in after the </form>

**Jabica** · Aug 14 '08, 10:17 PM

This is the formfunction.js file.

Code:

var fCurr = 0;
var fTotal = 0;
var fButton = "submit";
var fReq = new Array();

function changespec(aclass)
{
	var class = new Array();
	class[1] = new Array("Balanced", "Feral", "Resto");	//druid
	class[2] = new Array("Marksmith", "Beast Mastery", "Survival");    //hunter
	class[3] = new Array("Arcane", "Fire", "Frost");	//mage
	class[4] = new Array("Holy", "Protection", "Retribution");	//paladin
	class[5] = new Array("Discipline", "Holy", "Shadow");	//priest
	class[6] = new Array("Assassination", "Combat", "Sublety");		//rogue
	class[7] = new Array("Elemental", "Enhacement", "Restoration");	//shaman
	class[8] = new Array("Arms", "Fury", "Protection");	//warrior
	class[9] = new Array("Affliction", "Demonology", "Destruction");//warlock
	// 1. get the selected value from combo1:
	switch(aclass.value)
	{
		case 'Druid':
  	  	  var class_value = 1;
		  break;    
		case 'Hunter':
		  var class_value = 2;
		  break;
		case 'Mage':
		  var class_value = 3;
		  break;
		case 'Paladin':
		  var class_value = 4;
		  break;
		case 'Priest':
		  var class_value = 5;
		  break;
		case 'Rogue':
		  var class_value = 6;
		  break;
		case 'Shaman':
		  var class_value = 7;
		  break;
		case 'Warrior':
		  var class_value = 8;
		  break;
		case 'Warlock':
		  var class_value = 9;
		  break;
		default:
		  var class_value = 1;		
		  break;
	}
	
	// 2. make sure combo2 is empty:
	document.forms["inputform"].elements["spec"].options.length=0;

//	alert("Checking class_value is " + class_value + " and option is " + class[class_value]);

	// 3. loop throught the hard-coded values:
	for (var i=0;i<class[class_value].length;i++)
	{
		// dynamically create a new <option> element:
		var opt = document.createElement("option");

		opt.setAttribute('value',class[class_value][i]); 
		opt.innerHTML = class[class_value][i];

		document.forms["inputform"].elements["spec"].appendChild(opt);
	}	
}

function aEmpty(fBox, fReqnum)
{
	fReq[fReqnum] = fBox.value;
	
//	alert("The new Current is: " + fReq);		
	aSubmit();
}

function aSubmit()
{
	var fCheck = true;
	
	for(i = 0;i < fReq.length;i++)
	{
		if(fReq[i] == "" || fReq[i] == " ")
		{
			fCheck = false;
		}
	}

	if(fCheck == true)
	{
//		alert("The submit button is enabled");
		document.forms['inputform'].elements[fButton].disabled = false;
	}
}

**mrhoo** · Aug 15 '08, 02:07 AM

IE has always been a bonehead when it comes to select elements.

Up to IE7 it thought a select was a kind of a pop up window, and try to tell it different.

IE7 lets a select be an html element, but it doesn't handle options like the other browsers. Styling an option is difficult for IE, but is just like styling any other element for most browsers.

You can't append a child node to an option in IE,
(probably the cause of your error)
but you can set the option.text property to script the option's text.

This will work in the other browsers the same as appending a text node.

**Jabica** · Aug 15 '08, 09:19 PM

Thanks,

It's most definitely an issue i will have to resolve but as it stands i commented out lines:

54, 59-68 and 91-95 and still have a problem with fReq not been declared. Also removed the disabled from the html <script>

Anything else that might be causing the issue?

Here's a skeleton of the html to see if it sheds some light:

Code:

<html>
<head>
...
<script language='JavaScript' type='text/javascript' src='formfunctions.js'></script>
</head>
<body>
...
<form>
....
</form>
<script language='JavaScript' type='text/javascript'>fButton = 'postnewthread'; fReq[0] = ''; fReq[1] = ''; fReq[2] = ''; fReq[3] = '';</script>
</body>
</html>

Also exact error message is:

Line:292
Char: 28
Error: 'fReq' is undefined
Code: 0

1) I'm also considering making another formfunctions.j s just for ie and do a browser detection in the header to select file based on browser. Since i don't have much experience with mozzilla/ie incompatabiliti es is this the best option?

2) Based on your explanation of the option, can i still set the lenght of options and just change the text and value for each instead of removing and adding?

3) is the:

Code:

document.forms["inputform"].elements["spec"]

accepted by ie7 or is there any incompatability ;

4) is there any site/book that i can read that i can use to learn a bit more of these diferences between browsers?

Tcks

**Jabica** · Aug 18 '08, 03:37 PM

After buying some new update javascript books and read a couple of websites i did some changes on my code, even tho i'm still having problems with ie 7 i've made some progression and learn a few new things.

First i've implemented jQuery to my code so i don't have my code so messed up and, and it fixed my problem with disabling my button.

So on the header after including jquery.js i have this:

Code:

<script type='text/javascript'>
		var sPath = window.location.pathname;
		var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
		var fButton = 'submit';
		var fReq = [];
		$(document).ready(function(){
				if(sPage == 'app.php'){		
					fButton = 'postnewthread'; 
					fReq[0] = ''; 
					fReq[1] = ''; 
					fReq[2] = ''; 
					fReq[3] = '';
					document.forms['inputform'].elements[fButton].disabled = true;
				}
		});
		</script>

Followed by my formfunctions.j s. As you can see i move the var declarations from the formfunctions.j s right to the page itself. Good news is that i no longer get the error saying that fReq does not exist from the main page at load time.

But i still have 2 errors:

1) When i try to use my dropdown i get a "object expected" error, now as you all know ie7 is very good at detailing errors (NOT), and since it works as intended in firefox i can not use it to debug.

2) My other error is another "object expected", when i run function aEmpty(). I know i use a very unorthodoxic approach to form validation but i'm trying to learn from the process. The process is to create an Array the size of the fields i want to make sure are not empty (fReq), a onchange call to function aEmpty() will change the fReq array respective to that form element and check is all items in fReq have text is none are blank it will then activate the submit button to process form. All this to try to explain why i'm getting an "object expected" on both function, specially when they both different.

My thoughts are on variable scopes, but since firefox uses is w/o a problem i don't see why would it give a problem in ie7 they not that much different. Also i commented out the appendChild and options.lenght= 0 in changespec() just cus they might be a potential ie7 incompatibility .

**Jabica** · Aug 18 '08, 04:17 PM

Let's this will be my final post as i finally fixed my problem, another example of going back to the basics.

Code:

function changespec(aclass){
	var fclass = [];
	fclass[1] = ['Balanced', 'Feral', 'Resto'];	//druid
	fclass[2] = ['Marksmith', 'Beast Mastery', 'Survival'];    //hunter
	fclass[3] = ['Arcane', 'Fire', 'Frost'];	//mage
	fclass[4] = ['Holy', 'Protection', 'Retribution'];	//paladin
	fclass[5] = ['Discipline', 'Holy', 'Shadow'];	//priest
	fclass[6] = ['Assassination', 'Combat', 'Sublety'];		//rogue
	fclass[7] = ['Elemental', 'Enhacement', 'Restoration'];	//shaman
	fclass[8] = ['Arms', 'Fury', 'Protection'];	//warrior
	fclass[9] = ['Affliction', 'Demonology', 'Destruction'];//warlock
	// 1. get the selected value from combo1:
	switch(aclass.value)
	{
		case 'Druid':
  	  	  var class_value = 1;
		  break;    
		case 'Hunter':
		  var class_value = 2;
		  break;
		case 'Mage':
		  var class_value = 3;
		  break;
		case 'Paladin':
		  var class_value = 4;
		  break;
		case 'Priest':
		  var class_value = 5;
		  break;
		case 'Rogue':
		  var class_value = 6;
		  break;
		case 'Shaman':
		  var class_value = 7;
		  break;
		case 'Warrior':
		  var class_value = 8;
		  break;
		case 'Warlock':
		  var class_value = 9;
		  break;
		default:
		  var class_value = 1;		
		  break;
	}
	
	// 2. loop throught the hard-coded values:
	for (var i=0;i<fclass[class_value].length;i++){
		document.forms["inputform"].elements["spec"].options[i].text = fclass[class_value][i];
		document.forms["inputform"].elements["spec"].options[i].value = fclass[class_value][i];						
	}	
}

Here's my new changspec() function, i'm sure you noticed the changes on the way i change the value on the select element. But that the problem, the problem was my original class array, apparently class is a restricted or already used variable or function in explorer. Once i changed the name, "voila champagne".

Now my form works w/o a problem both on mozilla and ie7. Even tho i was able to identify some new approaches at differences between mozilla and ie i was more about following the basics than anything else.

Thanks for all the comments and bearing with me on my JS endeavors.I post my thoughts and conclusions as i hope this might help someone else, after all the point of a forum like this is alot of give and take.

JavaScript IE incompatability using in html a var set in a js file

JavaScript IE incompatability using in html a var set in a js file

Comment

Comment

Comment

Comment

Comment

Comment

Comment