SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide and show divs

    I have a form composed of several checkboxes.
    Each checkbox expands the form by showing or hiding a <div> when it is checked and repectivly unchecked. Beside the "submit" button i have a "Reset"
    button which hides all div's exept some of them.

    <div>'s expand and respectivly hide with no problem until the "reset" button
    is pressed. After this all divs remain alll hidden no matter what:

    These are the functions that i use to show an hide divs:


    PHP Code:
    function show_row(row_id,check){ 
        
        if ((
    document.getElementById(row_id) != null)) 
         
          if ((
    document.getElementById(row_id).style.display == 'none')) 
          { 
            
    document.getElementById(row_id).style.display 'inline'
           
    document.getElementById(check).checked true
          } else { 
            
    document.getElementById(row_id).style.display 'none'
            
    document.getElementById(check).checked false
          } 
      } 
    and respectivly to hide all divs:
    PHP Code:
    function hideAllDivs()
    {
        var 
    divs document.getElementsByTagName("div");

        for (var 
    0divs.length; ++i) {
        if(
    divs[i].id!="submit")
            
    divs[i].style.display "none";
        } 
    Can anyone tell me whats the problem?

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you include your HTML as well?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <script type="text/javascript">
    
     function show_row(row_id,check){ 
        // Make sure the element exists before calling it's properties 
        if ((document.getElementById(row_id) != null)) 
          // Toggle visibility between none and inline 
          if ((document.getElementById(row_id).style.display == 'none')) 
          { 
            document.getElementById(row_id).style.display = 'inline'; 
           document.getElementById(check).checked = true; 
          } else { 
            document.getElementById(row_id).style.display = 'none'; 
            document.getElementById(check).checked = false; 
          } 
      } 
      
      
      function intOnly(i) {
    	if(i.value.length>0) {
    		i.value = i.value.replace(/[^\d]+/, ''); 
    	}
    }
    
    function hideAllDivs()
    {
        var divs = document.getElementsByTagName("div");
    
        for (var i = 0; i < divs.length; ++i) {
    	if(divs[i].id!="submit")
            divs[i].style.display = "none";
        }
    }
    
    
    </script>
    
    
    <form action="<?echo $PHP_SELF?>" method="get">
       <table border="0">
       </td></tr>
       <Tr><TD>
       <table border="0" bordercolor="#993366"  ><TR>
           <TD width="719" bgcolor="#f9f9f9"><input type="checkbox" name="inspectarea" id="inspectarea" value="1" onClick="show_row('check_insp','inspectarea');" />
             <span class="main">        Inspectarea publica a documentelor cererii de brevet de inventii prin furnizarea copiilor		 </span>
             <div style="display:none" id="check_insp" name="check_insp"><div align="center" class="lm_subtext" style="background-color:#CCCCCC; border-color: #003366; border-style:dashed; border-width:thin"><BR>
              <em>Telefax:</em>
    		   <input name="telefax" type="checkbox" value="Y"/> 
    		   <em>Pagini:</em>
    		   <input name="telefax_pagini" type="text" size="6" maxlength="6" onChange="intOnly(this);" onKeyUp="intOnly(this);" oneyPress="intOnly(this);" />
    		 <BR><em>&nbsp;&nbsp;Hartie:</em>
    		   <input name="hartie" type="checkbox" value="Y"/>
    		   <em>Pagini:</em>
    		   <input name="hartie_pagini" type="text" size="6" maxlength="6" onChange="intOnly(this);" onKeyUp="intOnly(this);" oneyPress="intOnly(this);" />
             </div></div>	   </TD>
      
    <tr>
    	<td>
          <input type="checkbox" name="inlesniri" value="checkbox" onClick="show_row('check_inlesniri','inlesniri');"/>
          <span class="style10">Inlesniri</span></td>
    </tr>
    
    
    <tr>
    	<TD><div id="check_inlesniri" name="check_inlesniri" style="display:none" >
    	  <div align="left" class="lm_subtext" style="background-color:#CCCCCC; border-color: #003366; border-style:dashed; border-width:thin" >
    	      <input type="radio" name="inl" checked="checked" value="25%" /><span class="main">25% din cuantumul taxei stabilite, daca este o intreprindere al carei numar   mediu anual de angajati nu depaseste 250 persoane si are o cifra de afaceri nu   mai mare de 8 milioane dolari SUA (echivalentul in lei)</span>
    	   <BR>
    	   <span class="main">  <input type="radio" name="inl" value="10%" />10% din cuantumul taxei stabilite si scutirea de plata taxelor pentru mentinerea   in vigoare a protectiei pentru primii 5 ani, daca este o organizatie din sfera   stiintei si inovarii</span>
    	   </label>
           <BR>
    	      <input type="radio" name="inl" value="5%" /><span class="main">5% din cuantumul taxei stabilite, daca este persoana fizica si are calitatea de   autor</span></div>
    	</div></TD>
    </tr>
    
      <TR>
         <TD>
      <div id="submit" align="center">
        <input name="submit" type="submit"  value="Continue" />
        <input value="Reset" type="reset"  onclick="hideAllDivs();"/></div>     </TD>
      </TR>
     </TABLE>
     </td></tr>
     <tr><td>&nbsp;</td>
     </tr>
      </table> 
       <input type="hidden" name="action" value="Go!"/>
    </form>

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've figured out your issue:

    If you look at your "hideAllDivs" function, you're looping through the entire document and setting *all* the styles to "display:none". Then your checkbox doesn't appear to work because you're only displaying the container divs - which contain hidden divs. You need to change your function for 'hideAll' to only hide the containers instead of every single div on the page.

    Also...one of your checkboxes, 'inlesniri', only has a name, not an id

    HTH,

    Jon


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
  •