SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: [js] [array]

  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Location
    Berlin
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [js] [array]

    Hello!

    I have a problem with a javascript array. I have different channels with different categories which can be displayed by a checkbox selection. The main problem I have is that the "unchecking" not works correctly.

    Look:

    PHP Code:
    <script type="text/javascript">
    function 
    displayArrayContent(thewhat) {
    var 
    document.forms["myForm"]; 
    var 
    checkedBoxes '';
    var 
    thearrays = new Array();

    if (
    x.elements["[Category][01]"].checked == true) {          checkedBoxes "block"
    }
    else if (
    x.elements["[Category][02]"].checked == true) {
    checkedBoxes "block"
    }
    else if (
    x.elements["[Category][03]"].checked == true) {
    checkedBoxes "block"
    } else { 
    checkedBoxes "none"; }
    thearrays thewhat.split("|"); 
    for (var 
    0thearrays.lengthi++) { 
    if (
    document.getElementById) {
    document.getElementById(thearrays[i]).style.display checkedBoxes;
    }     
    }
    }
    </script>

    <form action="#" method="post" name="myForm">
    <input type="checkbox" name="[Category][01]" value="01" onclick="displayArrayContent('cat1|cat2')" /> Channel 1<br/>
    <input type="checkbox" name="[Category][02]" value="02" onclick="displayArrayContent('cat1|cat3|cat4')" /> Channel 2<br/>
    <input type="checkbox" name="[Category][03]" value="03" onclick="displayArrayContent('cat2|cat3')" /> Channel 3<br/>
    <hr />
    <div style="display: none" id="cat1">
    <input type="checkbox" name="[Category][1]" value="cat1" /> Category 1 </div>
    <div style="display: none;" id="cat2">
    <input type="checkbox" name="[Category][2]" value="cat2" /> Category 2 </div>
    <div style="display: none;" id="cat3">
    <input type="checkbox" name="[Category][3]" value="cat3" /> Category 3 </div>
    <div style="display: none;" id="cat4">
    <input type="checkbox" name="[Category][4]" value="cat3" /> Category 4 </div>
    </form> 
    What I want is that if channel 1 and 2 are checked, the depending categories 1, 2, 3, 4 are displayed. If channel 1 and 3 are checked, the depending categories 1, 2, 3 are displayed.

    If I have two boxes selected at the same time the script fails - What do I have to do to correct the mistake?

    thanks
    -b

  2. #2
    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 burito,

    Here's a suggestion:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    #cat1, #cat2, #cat3, #cat4 {
      display: none;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      var e = document.forms['myForm'].elements;
      e['[Category][01]'].onclick = cbOnClick;
      e['[Category][02]'].onclick = cbOnClick;
      e['[Category][03]'].onclick = cbOnClick;
      cbOnClick(); // handle default checks
    }
    function cbOnClick()
    {
      var c1, c2, c3, c4, b = 'block', n = 'none';
      c1 = c2 = c3 = c4 = false;
      var e = document.forms['myForm'].elements;
      if (e['[Category][01]'].checked) {
        c1 = c2 = true;
      }
      if (e['[Category][02]'].checked) {
        c1 = c3 = c4 = true;
      }
      if (e['[Category][03]'].checked) {
        c2 = c3 = true;
      }
      document.getElementById('cat1').style.display = c1 ? b : n;
      document.getElementById('cat2').style.display = c2 ? b : n;
      document.getElementById('cat3').style.display = c3 ? b : n;
      document.getElementById('cat4').style.display = c4 ? b : n;
    }
    </script>
    </head>
    <body>
    
    <form action="#" method="post" name="myForm">
    <p><input type="checkbox" name="[Category][01]" value="01")"> Channel 1</p>
    <p><input type="checkbox" name="[Category][02]" value="02")"> Channel 2</p>
    <p><input type="checkbox" name="[Category][03]" value="03")"> Channel 3</p>
    <hr>
    <div id="cat1">
    <input type="checkbox" name="[Category][1]" value="cat1"> Category 1</div>
    <div id="cat2">
    <input type="checkbox" name="[Category][2]" value="cat2"> Category 2</div>
    <div id="cat3">
    <input type="checkbox" name="[Category][3]" value="cat3"> Category 3</div>
    <div id="cat4">
    <input type="checkbox" name="[Category][4]" value="cat3"> Category 4</div>
    </form>
    
    </body>
    </html>
    Last edited by MikeFoster; Nov 26, 2006 at 07:14.

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Location
    Berlin
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool!!!

    Your code works perfectly. Thank you so much for your time, helping me out and solving this problem!

    Yet, I have one last question ;-) What must be done, if one or two or x channels are preselected by default? How can the dependend categories be displayed in this case?

    -b

  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)
    You're very welcome

    I added a line to the above code, in the onload event. It should handle default checks.

  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Location
    Berlin
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [completly] [solved]

    Wow! That was fast and 'again' perfect!

    You're the best,

    thanks a lot and greetings from the other side of the big pond.
    -b

  6. #6
    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)


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
  •