Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 711
  • Last Modified:

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

0
braduhl
Asked:
braduhl
  • 7
  • 5
  • 5
1 Solution
 
HonorGodCommented:
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
 
HonorGodCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
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
 
HonorGodCommented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 7
  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now