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

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

braduhlAsked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
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
 
HonorGodSoftware EngineerCommented:
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
 
jessc7Commented:
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
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
HonorGodSoftware EngineerCommented:
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
 
braduhlAuthor Commented:
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
 
jessc7Commented:
Is Firefox case-sensitive on id's? Try "RevInscript" instead of "revInscript".
0
 
braduhlAuthor Commented:
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
 
braduhlAuthor Commented:
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
 
jessc7Commented:
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
 
HonorGodSoftware EngineerCommented:
Just came back to this.  Are you all set?
0
 
jessc7Commented:
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
 
braduhlAuthor Commented:
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
 
braduhlAuthor Commented:
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
 
braduhlAuthor Commented:
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
 
braduhlAuthor Commented:
Amazing quick solutions to my issue.  This was a tremendous help in putting the finishing touches to my Website.  Excellent Assistance!!!
0
 
jessc7Commented:
You're welcome!
0
 
HonorGodSoftware EngineerCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.