Solved

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

Posted on 2009-05-19
17
706 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
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.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
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…

734 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