SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)

    Basic show/hide won't work

    I'm sure I've been staring at this too long as this is so simple I can't believe it's not working. Go to http://petenzymes.com/catalog/SpecialOffer.php and scroll to the bottom of the page. You'll see a checkbox to acknowledge the shipping address is the same as the billing address. When checked it should hide the fields to collect shipping address information. It doesn't work. No JavaScript errors.

    Code JavaScript:
        function showShipping()
        {
            if (document.getElementById('shippingaddress').checked == true)
            {
                document.getElementById('shippingdiv').className = 'hidediv';
            }
            else
            {
                document.getElementById('shippingdiv').className = 'showdiv';
            }
        }
     
        onload = showShipping;

    I've tried using className (as you see here) and also style.display = 'none'; Neither work or throw errors. I've used alerts to verify I do go where I want to in the if/else statement.

    I'm stumped and my eyes are bleeding from staring at this. I'm sure it's a tiny thing so if someone can point me in the right direction I'd be grateful.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cannot have a div (#shippingdiv) directly inside a TABLE element.

    I would get rid of the div and give all the shipping TR's a class of "shipping" and then add this script:

    Code Javascript:
    function showShipping()
    {
       if (document.getElementById('shippingaddress').checked == true)
         { var display = 'none'; }
       else
         { var display = 'block'; }
     
       var TR = document.getElementsByTagName('TR');
       for ( var i = 0 ; i < TR.length ; ++i ) {
          if(TR[i].className=='shipping') TR[i].style.display = display;
       }
    }
    onload = showShipping;

    Hope that helps.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Yep, that helps.

  4. #4
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code is listening for the wrong event. You're doing windows.onload, which means the code will run precisely once. You can prove that for yourself by setting the default value for the checkbox and loading the page.

    You might be able to make it work based on the onclick handlers for each of the checkboxes. Try that.

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Arlen View Post
    Your code is listening for the wrong event. You're doing windows.onload, which means the code will run precisely once. You can prove that for yourself by setting the default value for the checkbox and loading the page.

    You might be able to make it work based on the onclick handlers for each of the checkboxes. Try that.
    He has an onclick event attached inline.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This is partly why inline event attributes are a bad idea. it should be removed and instead replaced with the following:

    Code javascript:
    onload = function () {
        showShipping();
        document.getElementById('shippingaddress').onclick = showShipping;
    }

    Or even better, just place the following at the end of the body, just before the </body> tag.

    Code javascript:
    showShipping();
    document.getElementById('shippingaddress').onclick = showShipping;

    You may even want to place the whole script at the bottom of the body. That's where they are supposed to be nowdays anyway.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul

    ...a question...

    Recently, I have been using Dean Edward's script to see if the DOM has loaded... Would you recomend his script or is placing scripts before </body> better?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I would suggest placing the script just before the </body>
    While Dean Edwards script works, it is less likely to work that the alternative. The simpler the solution the better and you can't get much more simple than placing the code ready to run at the bottom of the page.

    This also falls in line with yahoo's guidelines for improving page loading performance.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •