SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/hide table row - radio button

    Hi,

    I have the following scenerio: when my test first page loads:

    I need the second section hidden. The second section should only be shown if they click the yes radio button, hidden if no. I'm having a difficult time managing the JS with this, even though it should be simple. If you view the source on the above file you can see my attempt at doing this isn't quite working and I'm not sure why since my JS skills aren't the best.

    Ok, I came up with this which isn't quite working right:

    Code:
    <html>
    <head>
    <script>
    function toggle() {
     if( document.getElementById("hidethis").style.display=='none' ){
       document.getElementById("hidethis").style.display = '';
     }else{
       document.getElementById("hidethis").style.display = 'none';
     }
    }
    </script>
    </head>
    <body>
    
    <a href="javascript:;" onClick="toggle();">toggle</a>
    
    <table border="1">
    <tr>
    <td>Always visible</td>
    <td><input type="radio" name="citizen" value="yes" onClick="toggle">Yes <input type="radio" 
    
    name="citizen" value="no" onClick="toggle();">No
    </tr>
    <tr id="hidethis" style="display:none;">
    <td>Hide this</td>
    </tr>
    <tr>
    <td>Always visible</td>
    </tr>
    </table>
    
    </body>
    </html>
    Thanks,
    Ryan Butler

    Midwest Web Design

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it figured out (I always seem to do this):

    Code:
    <html>
    <head>
    <script>
    function off() {
       document.getElementById("hidethis").style.display = 'none';
    }
    function on() {
       document.getElementById("hidethis").style.display = '';
    }
    
    </script>
    </head>
    <body>
    
    <table border="1">
    <tr>
    <td>Always visible</td>
    <td><input type="radio" name="citizen" value="yes" onClick="on();">Yes <input type="radio" name="citizen" value="no" onClick="off();">No
    </tr>
    <tr id="hidethis" style="display:none;">
    <td>Hide this</td>
    </tr>
    <tr>
    <td>Always visible</td>
    </tr>
    </table>
    
    </body>
    </html>
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shoot, I forgot the approach above would work but I need this radio button to hide two rows, not just one.
    Ryan Butler

    Midwest Web Design

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the following. Your hideable rows will need to have IDs like this: hidethis1, hidethis2, etc.
    Code:
    function off() {
      var e, i = 1;
      do {
        e = document.getElementById("hidethis" + i++);
        if (e) e.style.display = 'none';
      } while (e);
    }
    function on() {
      var e, i = 1;
      do {
        e = document.getElementById("hidethis" + i++);
        if (e) {
          try { e.style.display = 'table-row'; } // DOM
          catch (err) { e.style.display = 'block'; } // IE
        }
      } while (e);
    }

  5. #5
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think that will work because I can only have one ID per row. Whereas I need two rows to share one ID, such as a DIV, but I haven't got that to work.

    ex.,

    Code:
    <div id="hidethis">
    <table>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table>
    </div>
    This is truly an aggravating issue.
    Ryan Butler

    Midwest Web Design

  6. #6
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why does my ID "hidethisaddress" have no properties when viewed in a browser? This is about the only solution I can come up with that might work for my need.

    http://midwestwebdesign.net/New1.html
    Ryan Butler

    Midwest Web Design

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, now I'm confused.

    So, you can't have this?
    [code]
    <tr id='hideme1'><td>bla bla</td></tr>
    <tr id='hideme2'><td>bla bla</td></tr>
    [code]

    You could give multiple rows the same class-name.

    Actually, there are several different ways to do this - but we have to know what your html structure is going to be.

  8. #8
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, you can't have this?
    [code]
    <tr id='hideme1'><td>bla bla</td></tr>
    <tr id='hideme2'><td>bla bla</td></tr>
    [code]
    Nope, sorry for the confusion. The structure looks like this:

    http://midwestwebdesign.net/app_demo.html

    Under the mailing address section (yes or no), I need to have the yes radio button show both rows (address, city), or if they click no, don't show the two rows. Additionally, on page load, don't show the two rows at all.
    Ryan Butler

    Midwest Web Design

  9. #9
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, you can't have this?
    [code]
    <tr id='hideme1'><td>bla bla</td></tr>
    <tr id='hideme2'><td>bla bla</td></tr>
    [code]
    Nope, sorry for the confusion. The structure looks like this:

    http://midwestwebdesign.net/app_demo.html

    Under the mailing address section (yes or no), I need to have the yes radio button show both rows (address, city), or if they click no, don't show the two rows. Additionally, on page load, don't show the two rows at all.

    So basically a class would be great in this instance, I just don't know how you do that in JS.
    Ryan Butler

    Midwest Web Design

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    Try the following. It will show or hide all TRs with class 'collapsible'.
    Code:
    function offaddress()
    {
      xGetElementsByClassName('collapsible', document, 'tr',
        function(e) {
          e.style.display = 'none';
        }
      );
    }
    function onaddress()
    {
      xGetElementsByClassName('collapsible', document, 'tr',
        function(e) {
          try { e.style.display = 'table-row'; } // DOM
          catch (err) { e.style.display = 'block'; } // IE
        }
      );
    }
    // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
    function xGetElementsByClassName(c,p,t,f)
    {
      var found = new Array();
      var re = new RegExp('\\b'+c+'\\b', 'i');
    //  var list = xGetElementsByTagName(t, p);
      var list = p.getElementsByTagName(t);
      for (var i = 0; i < list.length; ++i) {
        if (list[i].className && list[i].className.search(re) != -1) {
          found[found.length] = list[i];
          if (f) f(list[i]);
        }
      }
      return found;
    }

  11. #11
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, works like a champ!

    I definately don't understand what this is doing:

    Code:
    // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
    function xGetElementsByClassName(c,p,t,f)
    {
      var found = new Array();
      var re = new RegExp('\\b'+c+'\\b', 'i');
    //  var list = xGetElementsByTagName(t, p);
      var list = p.getElementsByTagName(t);
      for (var i = 0; i < list.length; ++i) {
        if (list[i].className && list[i].className.search(re) != -1) {
          found[found.length] = list[i];
          if (f) f(list[i]);
        }
      }
      return found;
    }
    But I guess I'll consider it good since it's now working! I guess I could have used an ID as long as they were two different ID names that compensated for both.

    Thank you very much Mike, it is greatly appreciated!
    Ryan Butler

    Midwest Web Design

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome, Ryan. My pleasure.

    Check out the documentation for xGetElementsByClassName. If you have any questions feel free to ask.

    The last parameter is an (optional) function reference. So instead of looping through the returned array we provide a function and it gets called for each item in the array.

    You'll notice that I have one line commented out. If you want IE4+ support or need to get around the IE5 '*' bug you can use xGetElementsByTagName on that line.

    All the best to ya!

  13. #13
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, I will check it out.
    Ryan Butler

    Midwest Web Design


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •