ansaurus

Question

Getting a Javascript error in IE7 but not in Firefox

Answer 1

+1 A:

Have you tried Firebug Lite to debug it in IE? (http://getfirebug.com/lite.html)

Nelson 2009-07-15 20:11:57

Answer 2

A:

vrf.VRDescChange(this.form)

I think above line is behaving differently in Firefox and in IE.

Change your SELECT to

 <select onchange="vrf.VRDescChange(this)" name="request_type">

And use this JS:

VRFunctions.prototype.VRDescChange = function(el) {    
   if(el.options[el.selectedIndex].value === "Business Trip") {
      document.getElementById("otheroptions").style.display = "block";
   }
}

I would advice you to look up how you can attach your event handlers unobtrusively.

EDIT:

Fixed code.

EDIT:

What is the value of 'vrf' here?

Try this code: (Working Demo)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
#otheroptions { display: none; }
</style>

<script>
function handleChange(el)
{
   var value = el.options[el.selectedIndex].value;
   document.getElementById("otheroptions").style.display = value === '' ? 'none' : 'block';
}

</script>
</head>
<body>
  <p>Hello from JS Bin</p>
  <p id="hello"></p>
<form>
   <ul>
      <li>
         <label class="description" for="request_type">Type of request </label>
         <div>
            <select onchange="handleChange(this)" name="request_type"> 
               <option value="" selected="selected"></option>
               <option value="Business Trip">Business Trip</option>    
            </select>
         </div> 
      </li>
      <span id="otheroptions">
         <li>
            <input type="text" id="Name"></input>
         </li> 
      </span>
   </ul>
</form>  
</body>
</html>

SolutionYogi 2009-07-15 20:13:21

If that is the case, then why does it work just peachily in Firefox? this.form is clearly returning something.

Peter 2009-07-15 20:14:47

My raw DOM knowledge is getting rusty, 'this' does refer to the current element. I think 'this.form' behaves differently in IE and Firefox. In any case, instead of passing the form, you can pass the select object itself and check it's value.

SolutionYogi 2009-07-15 20:20:47

Also, this did not fix the problem.

Peter 2009-07-15 20:20:52

I just fixed the code to find the 'value' for the select element. 'SELECT' element doesn't have value property like 'input' element does.

SolutionYogi 2009-07-15 20:22:24

With the new changes, it still doesn't solve the issue. However, this way does seem a lot cleaner (and less cumbersome) than passing in the whole form. Thank you.

Peter 2009-07-15 20:27:11

What's the issue now??

SolutionYogi 2009-07-15 20:31:21

It just doesn't work :-p I'm still getting the Javascript error in IE.

Peter 2009-07-15 20:31:56

What is the vrf variable here?

SolutionYogi 2009-07-15 20:35:21

I think you need to post the complete code. I have created a sample page which works and illustrates the technique. Check my original post.

SolutionYogi 2009-07-15 20:36:43

Answer 3

A:

When you call VRDescChange in the select element's onChange handler, why are you passing this.form when you then go on to reference the select element in the function:

if(form.request_type.value === "Business Trip") {

Surely it would make more sense to pass this as the argument to VRDescChange instead of this.form in the onChange handler

Also, to get the selected value you want to use:

var rt; //Set this to reference the request_type select element
var selectedvalue = rt.options[rt.selectedIndex].value;

Perspx 2009-07-15 20:13:50

Answer 4

A:

Your problem may be related to setting a display style of "block" on a span element. I seem to remember that IE gets very finicky about what styles get set on which elements.

Try changing the display style to "inline" and see if it still complains:

document.getElementById("otheroptions").style.display = "inline";

17 of 26 2009-07-15 20:27:44

No luck there. I feel like the error is specifically with JavaScript, at least right now. The error is a javascript error, and as a result, IE refuses to run any of the code.

Peter 2009-07-15 20:31:20

Answer 5

A:

Your example works just fine in IE7. My guess is there is some other issue. I would look at your VRFunctions object.

<script>
   (function(){
      VRFunctions = function(){};
      VRFunctions.prototype.VRDescChange = function(value) {    
         if (value === "Business Trip") {
            document.getElementById("otheroptions").style.display = "block";
         }
      };
    vrf = new VRFunctions();

   }());
</script>

<form>
   <ul>
      <li>
         <label class="description" for="request_type">Type of request </label>
         <div>
            <select onchange="vrf.VRDescChange(this.value)" name="request_type"> 
               <option value="" selected="selected"></option>
               <option value="Business Trip">Business Trip</option>    
            </select>
         </div> 
      </li>
      <span id="otheroptions" style="display:none">
         <li>
            <input type="text" id="Name"></input>
         </li> 
      </span>
   </ul>
</form>

illvm 2009-07-15 20:47:00

ansaurus

tags:

views:

answers:

Getting a Javascript error in IE7 but not in Firefox

related questions