asked on

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

HonorGod

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

jessc7

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?

HonorGod

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

braduhl

ASKER

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

jessc7

Is Firefox case-sensitive on id's? Try "RevInscript" instead of "revInscript".

braduhl

ASKER

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

braduhl

ASKER

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

jessc7

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

HonorGod

Just came back to this. Are you all set?

jessc7

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.

braduhl

ASKER

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

braduhl

ASKER

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

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

braduhl

ASKER

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!!!

braduhl

ASKER

Amazing quick solutions to my issue. This was a tremendous help in putting the finishing touches to my Website. Excellent Assistance!!!

jessc7

You're welcome!

HonorGod

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! :-)