?
Solved

Making selectedIndex code cross-browser compliant

Posted on 2006-04-18
5
Medium Priority
?
414 Views
Last Modified: 2011-10-03
Hello.
I have a small bit of JS I'm having trouble with.  It works perfect in firefox 1.5.x but I'm having trouble with IE6+.  I'm VERY new to learning JS so bear with me. The error is Error: 'document.all.other.style' is null or not an object.  I've tried a few things with no luck.

              <select name="type_reg" class="inputpad" onchange="if(this.selectedIndex >= '4')document.all.other.style.display = 'block';else document.all.other.style.display = 'none'">
          <option value=''></option>            
          <option value='Supervisor'>Supervisor</option>
          <option value='State Agency'>State Agency</option>
          <option value='Federal Agency'>Federal Agency</option>
          <option value='Other'>Other</option>
          <option value='Guest'>Guest Name</option>
        </select>
        <br />
            <div id="other" style="display:none">
        Other/Guest Name:<br />
        <input name="other" type="text" class="inputpad" size="25">
            </div>
0
Comment
Question by:grizum
5 Comments
 
LVL 25

Accepted Solution

by:
devic earned 500 total points
ID: 16481615
try this:
===========
<select name="type_reg" class="inputpad"
      onchange="document.getElementById('other').style.display=this.selectedIndex>=4?'block':'none'">
0
 
LVL 8

Expert Comment

by:KennyTM
ID: 16484565
hi.

As I know, document.all, as well as document.getElementById(), gets element according to the ID only, not the name. Hence you should replace the last but second line with

        <input name="other" type="text" class="inputpad" size="25" id="other">

Hope this helps.
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16485704
To be cross browser compatible, use document.getElementById:

<select name="type_reg" class="inputpad" onchange="if(this.selectedIndex >= '4')document.getElementById('other').style.display = 'block';else document.getElementById('other').style.display = 'none'">
          <option value=''></option>          
          <option value='Supervisor'>Supervisor</option>
          <option value='State Agency'>State Agency</option>
          <option value='Federal Agency'>Federal Agency</option>
          <option value='Other'>Other</option>
          <option value='Guest'>Guest Name</option>
        </select>
        <br />
          <div id="other" style="display:none">
        Other/Guest Name:<br />
        <input name="other" type="text" class="inputpad" size="25">
          </div>

This works on both FF and IE.
0
 

Author Comment

by:grizum
ID: 16488017
Thanks for the replies!

I'm in the process of replacing a hard drive in our webserver -- I will give this a try as soon as I'm done :)
0
 

Author Comment

by:grizum
ID: 16498497
Several good answers.  The reason I put the ID in the DIV is to hide the text above the input box.

Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question