Solved

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

Posted on 2009-05-19
17
695 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
  • 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
 

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Several part series to implement Internet Explorer 11 Enterprise Mode
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now