Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Child Button Pop-up Problems

    I need a pop-up window when the second child button is checked. I am having problems. Can you please help? Thank You!!

    Code:
    <script type="text/javascript">
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block"
      } else {
        e.style.display="none"
      }
      return true;
    }
    </script>
    <script type="text/javascript">
    
    $('input[type=checkbox]').change(function() { 
        // get id of the current clicked element 
        var id = $(this).attr('id'); 
        // find elements with classname 'parent-<id>' and (un)check them 
        var children = $('.parent-' + id).attr('checked', $(this).attr('checked')); 
    }); 
    </script>
    <script type="text/javascript">
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block";
      } else {
        elms=e.getElementsByTagName("INPUT");
        for(var i=elms.length;i--;){
    	if(elms[i].name=="cb1" || elms[i].name=="cb2")
    	     elms[i].checked=false;
        }
        e.style.display="none";
      }
      return true;
    }
    </script>
    </head>
    <body>
    <form name='f1' action='#'>
    <h2 align="center">Request Form</h2><br>
    <br>
    <br>
     <br>
    Please check what you want.<br><br>
    
    <input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
    <br>
    <div id="para1" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="b1"class="parent-s1" type="checkbox" name="cb1"/>
      <label for="cb1">ABC</label><br>
    &nbsp;&nbsp;&nbsp;<input type = "checkbox" class="parent-s1" name ="cb1" id ="b1" onclick ="newPage('http://www.your-url.com/your-page.htm')"> DEF
    
    <script type = "text/javascript">
    function newPage(page) {
    if (document.getElementById("cb1").checked) {  
    OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
    return false;
    }
    }
    
    
    function closepop() {if (OpenWin != null) OpenWin.close() }
    window.onunload = closepop;
    
    </script>
    <br>
    </div>
    <input type="checkbox" onclick="return toggleMe('para2')" value="2">2
    <br>
    <div id="para2" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="b2" class="parent-s2" type="checkbox" name="cb2"/>
      <label for="cb2">GHI</label><br>
    &nbsp;&nbsp;&nbsp;<input type = "checkbox" class="parent-s1" name ="cb2" id ="b2" onclick ="newPage('http://www.your-url.com/your-page.htm')"> JKL  
      <script type = "text/javascript">
    function newPage(page) {
    if (document.getElementById("cb2").checked) {  
    OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
    return false;
    }
    }
    
    
    function closepop() {if (OpenWin != null) OpenWin.close() }
    window.onunload = closepop;
    
    </script>
    <br>
    </div>
    <script type='text/javascript'>
    
    function Cb2Rb( setRef )
    {
     this.boxGroup = setRef;
    
     for( var i=0, len=setRef.length; i<len; i++ )
      setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
    
     this.scan=function(index)
     {
      if( this.boxGroup[ index ].checked )
       for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
        if( i != index )
         g[i].checked = false;
     }
    }
    
    new Cb2Rb( document.forms.f1.cb1 );
    new Cb2Rb( document.forms.f1.cb2 );
    </script>
    <script type='text/javascript'>
    function sub_delete{ 
            if (typeof document.checks.cb.length === 'undefined') { 
       /*then there is just one checkbox with the name 'cb' no array*/ 
            if (document.checks.cb.checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                }    
        }else{ 
      /*then there is several checkboxs with the name 'cb' making an array*/ 
            for(var i = 0, max = document.checks.cb.length; i < max; i++){ 
                if (document.checks.cb[i].checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                } 
     
            } 
        } 
        }//sub_delete end 
    </script>
    <script type='text/javascript'>
    $('input[class*="parent"]').change(function(){ 
        var cls = '.' + $(this).attr('class') + ':checked'; 
        var len = $(cls).length; 
        var parent_id = '#' + $(this).attr('class').split('-')[1]; 
     
        // 3. Check parent if at least one child is checked 
        if(len) { 
            $(parent_id).attr('checked', true); 
        } else { 
            // 2. Uncheck parent if all childs are unchecked. 
            $(parent_id).attr('checked', false); 
        } 
    }); 
    </script>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    [QUOTE=MikeyKs1;1138995]I need a pop-up window when the second child button is checked. I am having problems. Can you please help? Thank You!!

    First thing, you have the functions toggleMe
    and closepop defined twice, this is not good.

    Second thing, $ is not defined in your code.

    Put all your code in the head betwween
    a single set of
    <script type="text/javascript">
    </script>
    tags then post your new code
    and we will try again to help you.

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I move "all" the code to the top between the
    <script type="text/javascript">
    </script>
    tags the Parent checkboxes no longer expand and contract.

    I am new at this and assumed that I needed the function closepop() under each parent checkbox given that the bottom child checkbox would popup it's own window. I changed the code to reflect that. If I'm still wrong please correct me.

    Code:
     <script type="text/javascript">
    $('input[type=checkbox]').change(function() { 
        // get id of the current clicked element 
        var id = $(this).attr('id'); 
        // find elements with classname 'parent-<id>' and (un)check them 
        var children = $('.parent-' + id).attr('checked', $(this).attr('checked')); 
    }); 
    
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block";
      } else {
        elms=e.getElementsByTagName("INPUT");
        for(var i=elms.length;i--;){
    	if(elms[i].name=="cb1" || elms[i].name=="cb2")
    	     elms[i].checked=false;
        }
        e.style.display="none";
      }
      return true;
    }
    </script>
    </head>
    <body>
    <form name='f1' action='#'>
    <h2 align="center">Request Form</h2><br>
    <br>
    <br>
     <br>
    Please check what you want.<br><br>
    
    <input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
    <br>
    <div id="para1" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="b1" class="parent-s1" type="checkbox" name="cb1"/>
      <label for="cb1">ABC</label><br>
    &nbsp;&nbsp;&nbsp;<input id="b1" class="parent-s1" type="checkbox" name="cb1" onclick="newPage('http://www.your-url.com/DEF instructions.htm')"> DEF
    
    <script type = "text/javascript">
    function newPage(page) {
    if (document.getElementById("cb1").checked) {  
    OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
    return false;
    }
    }
    
    </script>
    <br>
    </div>
    <input type="checkbox" onclick="return toggleMe('para2')" value="2">2
    <br>
    <div id="para2" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="b2" class="parent-s2" type="checkbox" name="cb2"/>
      <label for="cb2">GHI</label><br>
    &nbsp;&nbsp;&nbsp;<input id="b2" class="parent-s1" type="checkbox" name="cb2" onclick="newPage('http://www.your-url.com/JKL instructions.htm')"> JKL  
      <script type = "text/javascript">
    function newPage(page) {
    if (document.getElementById("cb2").checked) {  
    OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
    return false;
    }
    }
    
    
    function closepop() {if (OpenWin != null) OpenWin.close() }
    window.onunload = closepop;
    
    </script>
    <br>
    </div>
    <script type='text/javascript'>
    
    function Cb2Rb( setRef )
    {
     this.boxGroup = setRef;
    
     for( var i=0, len=setRef.length; i<len; i++ )
      setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
    
     this.scan=function(index)
     {
      if( this.boxGroup[ index ].checked )
       for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
        if( i != index )
         g[i].checked = false;
     }
    }
    
    new Cb2Rb( document.forms.f1.cb1 );
    new Cb2Rb( document.forms.f1.cb2 );
    </script>
    <script type='text/javascript'>
    function sub_delete{ 
            if (typeof document.checks.cb.length === 'undefined') { 
       /*then there is just one checkbox with the name 'cb' no array*/ 
            if (document.checks.cb.checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                }    
        }else{ 
      /*then there is several checkboxs with the name 'cb' making an array*/ 
            for(var i = 0, max = document.checks.cb.length; i < max; i++){ 
                if (document.checks.cb[i].checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                } 
     
            } 
        } 
        }//sub_delete end 
    </script>
    <script type='text/javascript'>
    $('input[class*="parent"]').change(function(){ 
        var cls = '.' + $(this).attr('class') + ':checked'; 
        var len = $(cls).length; 
        var parent_id = '#' + $(this).attr('class').split('-')[1]; 
     
        // 3. Check parent if at least one child is checked 
        if(len) { 
            $(parent_id).attr('checked', true); 
        } else { 
            // 2. Uncheck parent if all childs are unchecked. 
            $(parent_id).attr('checked', false); 
        } 
    }); 
    </script>
    Last edited by MikeyKs1; 09-23-2011 at 09:24 PM.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still Confused

    Obliviously I don’t know what I’m doing so I ask for help. I still don’t see what I have done wrong. Would you please help me?

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sujay Shinoda View Post
    Not even close but thanks for trying to find something.

    This is what I have so far but something is still wrong!

    Code:
    <script type="text/javascript">
    $('input[type=checkbox]').change(function() { 
        // get id of the current clicked element 
        var id = $(this).attr('id'); 
        // find elements with classname 'parent-<id>' and (un)check them 
        var children = $('.parent-' + id).attr('checked', $(this).attr('checked')); 
    }); 
    
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block";
      } else {
        elms=e.getElementsByTagName("INPUT");
        for(var i=elms.length;i--;){
    	if(elms[i].name=="chk1" || elms[i].name=="chk2")
    	     elms[i].checked=false;
        }
        e.style.display="none";
      }
      return true;
    }
    </script>
    </head>
    <body>
    <form name='f1' action='#'>
    <h2 align="center">Request Form</h2><br>
    <br>
    <br>
     <br>
    Please check what you want.<br><br>
    
    <input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
    <br>
    <div id="para1" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="chk1" type="checkbox" class="parent-s1" name="chk1"/>
      <label for="chk1">ABC</label><br>
    &nbsp;&nbsp;&nbsp;<input id="chk1" type="checkbox" class="parent-s1" name="chk1" onclick="newPage('http://www.yourPopUppageDEF.com')"> DEF
    </script>
    <br>
    </div>
    <input id="s2" type="checkbox" onclick="return toggleMe('para2')" value="2">2
    <br>
    <div id="para2" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="chk2" type="checkbox" class="parent-s2" name="chk2"/>
      <label for="chk2">GHI</label><br>
    &nbsp;&nbsp;&nbsp;<input id="chk2" type="checkbox" class="parent-s2" name="chk2" onclick="newPage('http://www.yourPopUppageJKL.com')"> JKL
    </div>
    <script type = "text/javascript">
    function newPage(page) {
    if (document.getElementById("chk1","chk2").checked) {  
    OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
    return false;
    }
    }
    </script>
    <script type = "text/javascript">
    function Cb2Rb( setRef )
    {
     this.boxGroup = setRef;
    
     for( var i=0, len=setRef.length; i<len; i++ )
      setRef[ i ].onclick=( function(inst, namex){return function(){inst.scan(namex)}} )(this, i);
    
     this.scan=function(index)
     {
      if( this.boxGroup[ index ].checked )
       for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
        if( i != index )
         g[i].checked = false;
     }
    }
    
    new Cb2Rb( document.forms.f1.chk1 );
    new Cb2Rb( document.forms.f1.chk2 );
    </script>
    <script type='text/javascript'>
    function sub_delete{ 
            if (typeof document.checks.chk.length === 'undefined') { 
       /*then there is just one checkbox with the name 'chk' no array*/ 
            if (document.checks.chk.checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                }    
        }else{ 
      /*then there is several checkboxs with the name 'chk' making an array*/ 
            for(var i = 0, max = document.checks.chk.length; i < max; i++){ 
                if (document.checks.chk[i].checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                } 
     
            } 
        } 
        }//sub_delete end 
    </script>
    <script type='text/javascript'>
    $('input[class*="parent"]').change(function(){ 
        var cls = '.' + $(this).attr('class') + ':checked'; 
        var len = $(cls).length; 
        var parent_id = '#' + $(this).attr('class').split('-')[1]; 
     
        // 3. Check parent if at least one child is checked 
        if(len) { 
            $(parent_id).attr('checked', true); 
        } else { 
            // 2. Uncheck parent if all childs are unchecked. 
            $(parent_id).attr('checked', false); 
        } 
    }); 
    </script>
    Last edited by MikeyKs1; 09-28-2011 at 07:34 PM.

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making Progress

    It all works correctly now except that checkbox JKL pop-up only works if checkbox DEF is checked and when you uncheck checkbox JKL the pop-up pops up a second time.

    Code:
    <script type="text/javascript">
    $('input[type=checkbox]').change(function() { 
        // get id of the current clicked element 
        var id = $(this).attr('id'); 
        // find elements with classname 'parent-<id>' and (un)check them 
        var children = $('.parent-' + id).attr('checked', $(this).attr('checked')); 
    }); 
    
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block";
      } else {
        elms=e.getElementsByTagName("INPUT");
        for(var i=elms.length;i--;){
    	if(elms[i].name=="chk1" || elms[i].name=="chk2" || elms[i].name=="chk3" || elms[i].name=="chk4")
    	     elms[i].checked=false;
        }
        e.style.display="none";
      }
      return true;
    }
    </script>
    </head>
    <body>
    <form name='f1' action='#'>
    <h2 align="center">Request Form</h2><br>
    <br>
    <br>
     <br>
    Please check what you want.<br><br>
    
    <input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
    <br>
    <div id="para1" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="chk1" type="checkbox" class="parent-s1" name="chk1"/>
      <label for="chk1">ABC</label><br>
    &nbsp;&nbsp;&nbsp;<input id="chk2" type="checkbox" class="parent-s1" name="chk2" onclick="newPage('http://www.yourPopUppageDEF.com')"> DEF
    </script>
    <br>
    </div>
    <input id="s2" type="checkbox" onclick="return toggleMe('para2')" value="2">2
    <br>
    <div id="para2" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="chk3" type="checkbox" class="parent-s2" name="chk3"/>
      <label for="chk2">GHI</label><br>
    &nbsp;&nbsp;&nbsp;<input id="chk4" type="checkbox" class="parent-s2" name="chk4" onclick="newPage('http://www.yourPopUppageJKL.com')"> JKL
    </div>
    <script type = "text/javascript">
    function newPage(page) {
    if (document.getElementById("chk2","chk4").checked) {  
    OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
    return false;
    }
    }
    </script>
    <script type = "text/javascript">
    function Cb2Rb( setRef )
    {
     this.boxGroup = setRef;
    
     for( var i=0, len=setRef.length; i<len; i++ )
      setRef[ i ].onclick=( function(inst, namex){return function(){inst.scan(namex)}} )(this, i);
    
     this.scan=function(index)
     {
      if( this.boxGroup[ index ].checked )
       for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
        if( i != index )
         g[i].checked = false;
     }
    }
    
    new Cb2Rb( document.forms.f1.chk2 ),( document.forms.f1.chk4 );
    
    </script>
    <script type='text/javascript'>
    function sub_delete{ 
            if (typeof document.checks.chk.length === 'undefined') { 
       /*then there is just one checkbox with the name 'chk' no array*/ 
            if (document.checks.chk.checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                }    
        }else{ 
      /*then there is several checkboxs with the name 'chk' making an array*/ 
            for(var i = 0, max = document.checks.chk.length; i < max; i++){ 
                if (document.checks.chk[i].checked == true ) 
                                { 
                                    document.checks.submit(); 
                                    return 0; 
                                } 
     
            } 
        } 
        }//sub_delete end 
    </script>
    <script type='text/javascript'>
    $('input[class*="parent"]').change(function(){ 
        var cls = '.' + $(this).attr('class') + ':checked'; 
        var len = $(cls).length; 
        var parent_id = '#' + $(this).attr('class').split('-')[1]; 
     
        // 3. Check parent if at least one child is checked 
        if(len) { 
            $(parent_id).attr('checked', true); 
        } else { 
            // 2. Uncheck parent if all childs are unchecked. 
            $(parent_id).attr('checked', false); 
        } 
    }); 
    </script>

  • #8
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cant be done

    Well from the activity on this board I'm going to assume that this cannot be accomplished using JavaScript .

  • #9
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <script type="text/javascript">
    $('input[type=checkbox]').change(function() {
    // get id of the current clicked element
    var id = $(this).attr('id');
    // find elements with classname 'parent-<id>' and (un)check them
    var children = $('.parent-' + id).attr('checked', $(this).attr('checked'));
    });

    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
    e.style.display="block";
    } else {
    elms=e.getElementsByTagName("INPUT");
    for(var i=elms.length;i--{
    if(elms[i].name=="cb1" || elms[i].name=="cb2")
    elms[i].checked=false;
    }
    e.style.display="none";
    }
    return true;
    }
    </script>
    </head>
    <body>
    <form name='f1' action='#'>
    <h2 align="center">Request Form</h2><br>
    <br>
    <br>
    <br>
    Please check what you want.<br><br>

    <input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
    <br>
    <div id="para1" style="display:none">
    &nbsp;&nbsp;&nbsp;<input id="b1" class="parent-s1" type="checkbox" name="cb1"/>
    <label for="cb1">ABC</label><br>
    &nbsp;&nbsp;&nbsp;<input id="b1" class="parent-s1" type="checkbox" name="cb1" onclick="newPage
    Last edited by speE67ight; 10-12-2011 at 10:52 AM. Reason: wrong

  • #10
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm going to assume that this cannot be accomplished using JavaScript
    Last edited by speE67ight; 10-12-2011 at 10:54 AM. Reason: rong

  • #11
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to put inside code tags by hiting the # button above the message box and placing your code between the created brackets


  •  

    Posting Permissions

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