Solved

Hide/Display Table - Javascript Issue with Firefox - IE OK

Posted on 2009-05-19
17
708 Views
Last Modified: 2013-12-08
I am currently using the code below to only show a given table if a checked box is checked.  It has worked just fine in all my testing in IE.  Much to my dismay, it does not work in Firefox.  I am using the latest versions of both.

In Firefox, the table does not display when the checkbox is checked - any ideas?

Thanks a lot!

Brad
<td>
  <input name="cbRSInscript" type="checkbox" id="cbRSInscript" onclick= "if(this.checked == true)
   {document.getElementById('revInscript').style.display = 'inline';}
   else{document.getElementById('revInscript').style.display = 'none';}" value="true">
  </td>
  <td class="CCI-Text-SM-Blue">Add Reverse-Side Inscription ($6.00 per Piece)</td>
</tr>
 
 
<table id="RevInscript" name="RevInscript" style="display:none" width="325" border="0" cellpadding="7" cellspacing="0">
      <tr>
          <td>
          ........Table Contents........
          </td>
      </tr>    
</table>

Open in new window

0
Comment
Question by:braduhl
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 5
17 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24426200
Having a non-trivial code group in an event handler problematic at best...

How about something like this?

<input name="cbRSInscript" type="checkbox" id="cbRSInscript" onclick="showHide(this)" value="true">

<script type='text/javascript'>
  function showHide( obj ) {
    var target = document.getElementById( 'revInscript' )
    if ( target ) {
      target.style.display = ( obj.checked ) ? 'inline' : 'none'
    } else {
      alert( 'Specified element not found: "revInscript".' )
    }
  }
</script>

Open in new window

0
 
LVL 16

Expert Comment

by:jessc7
ID: 24426214
I don't believe "inline" is technically acceptable as a display option on a <table> element, which might be by Firefox is failing.

Can you wrap a <div> around the table, and toggle display:block and display:none on the <div> instead?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24426723
oh, interesting.  Use an empty string instead...
<script type='text/javascript'>
  function showHide( obj ) {
    var target = document.getElementById( 'revInscript' )
    if ( target ) {
      target.style.display = ( obj.checked ) ? '' : 'none'
    } else {
      alert( 'Specified element not found: "revInscript".' )
    }
  }
</script>

Open in new window

0
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.

 

Author Comment

by:braduhl
ID: 24426871
HonorGod,

I tested the first script, and then the second you just sent......

Both work fine in IE, but I get the Alert Message (in the script) in Firefox.

Any thoughts?

Thanks for your help!

Brad
0
 
LVL 16

Expert Comment

by:jessc7
ID: 24426953
Is Firefox case-sensitive on id's? Try "RevInscript" instead of "revInscript".
0
 

Author Comment

by:braduhl
ID: 24427030
jessc7,

This appears to have done the trick with the script that HonorGod supplied.  Thanks for the catch!

I will do some additional testing and report back....

Brad
0
 

Author Comment

by:braduhl
ID: 24427364
It appears that I can use the same script for Radio Buttons, but am unsure of the onclick Code for the two Radio Buttons (I'm in the process of learning Javascript :-).  With rbDesign5 checked by default, the table should display when customer enters the page.

I need rbDesign5 to display the table if checked, and to hide the table if rbDesign6 is checked.  (Checkboxes and Radio Buttons are the two senarios that I have.)

         <td><input type="radio" name="rbdesign" id="rbDesign5" value="rbDesign" checked ></td>
          <td>With Design/Logo</td>
          <td><input type="radio" name="rbdesign" id="rbDesign6" value="rbDesign"></td>
          <td>Without Design/Logo</td>

<table cellpadding="7" id="tblDesign">
       <tr>
          <td.>Table Content</td>
       </tr>
</table>

Thanks again for all the help....

Brad
0
 
LVL 16

Expert Comment

by:jessc7
ID: 24427700
I 'generisized' HonorGod's script a little. Now you will pass the table id string, as well as the originating object.

onclick="showHide(this, 'tblDesign')"
<script type='text/javascript'>
  function toggleTableDisplay(obj, tableId) {
    var target = document.getElementById(tableId)
    if ( target ) {
      target.style.display = ( obj.checked ) ? '' : 'none'
    } else {
      alert( 'Specified element not found: ' + tableId )
    }
  }
</script>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24427772
Just came back to this.  Are you all set?
0
 
LVL 16

Expert Comment

by:jessc7
ID: 24427792
If you're all set, you can give HonorGod the points. I was just tagging along. :) Plus he's helping me on one of my own issues.
0
 

Author Comment

by:braduhl
ID: 24428075
Thanks to the both of you for all your efforts.  I will give this a try first thing in the morning and post back. You guys have been a big help.

Thanks again,

Brad
0
 

Author Comment

by:braduhl
ID: 24432828
Everything is working perfectly for the Checkbox senario in both IE & Firefox - thank you very much.

I still need to get the same thing working for two Radio Buttons.  If the first radio button is checked - the table displays, if the second one is checked - the table hides.

What adjustments need to be made for this to happen?  I have posted the code for the radio buttons below:

<script type='text/javascript'>
  function showHide(obj, tableId) {
    var target = document.getElementById(tableId)
    if ( target ) {
      target.style.display = ( obj.checked ) ? '' : 'none'
    } else {
      alert( 'Specified element not found: ' + tableId )
    }
  }
</script>

<td><input type="radio" name="rbInscript" id="rbDesign3" value="rbDesign" onClick="showHide(this, 'tblInscript')"></td>
    <td>With Inscription</td>
    <td><input name="rbInscript" type="radio" id="rbDesign4" value="rbDesign" checked onClick="showHide(this, 'tblInscript')"></td>
    <td>Without Inscription</td>

I appreciate the effort!!!

Thanks,

Brad
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24432996
Well, you need to differentiate the "Show" radio button from the "Hide" one.
How would you like to do this?  Would having a "value" attribute of "Show" or "Hide" suffice?

For example, something like this?

Please note that I don't have the specified element (tblInscript) here
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template</title>
<script type='text/javascript'>
  function showHide( obj, tableId ) {
    var target = document.getElementById( tableId )
    if ( target ) {
      target.style.display = ( obj.value == 'Show' ) ? '' : 'none'
    } else {
      alert( 'Specified element not found: ' + tableId )
    }
  }
</script>
</head>
<body>
  <table border='1'>
    <tbody>
      <tr>
        <td>
          <input type="radio" name="rbInscript" id="rbDesign3" value="Show" onClick="showHide(this, 'tblInscript')">
        </td>
        <td>With Inscription</td>
        <td><input name="rbInscript" type="radio" id="rbDesign4" value="Hide" checked onClick="showHide(this, 'tblInscript')"></td>
        <td>Without Inscription</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Open in new window

0
 

Author Comment

by:braduhl
ID: 24433521
Perfect!  Thanks for the help with my continuing education!!!  :-)

Everything appears to be working the way I need it to!  I tested it in both IE & Firefox - thumbs up!

Keep up the great work!!!

Brad

P.S.  Thanks again Jessc7 for the assistance also!!!
0
 

Author Closing Comment

by:braduhl
ID: 31583210
Amazing quick solutions to my issue.  This was a tremendous help in putting the finishing touches to my Website.  Excellent Assistance!!!
0
 
LVL 16

Expert Comment

by:jessc7
ID: 24433636
You're welcome!
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24434072
Glad to be able to help

Thanks for the grade & points.

Good luck & have a great day.

jessc7: Thank you as well.  Let's get your issue resolved!  :-)
0

Featured Post

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

630 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