Page 1 of 1

HELP WITH EXPANDING FIELDSETS

Posted: Thu Jan 12, 2012 10:57 am
by ssumter
Hi Ineed help with the folllowing php web page. I have a fieldset that I am trying to collapse/expand. I have collapsed, but need to have it expanded on the when the user clicks the yes check box. I am posting the code. Any help would be appreciated.

Code: Select all

function constructCollapsableFieldsets()  
{ 
    var allFsets = document.getElementsByTagName('fieldset'); 
    var fset = null; 
    for (var i=0; i<allFsets.length; i++) 
    { 
        fset = allFsets[i]; 
        if(fset.attributes['collapsed']!=null) 
            constructCollapsableFieldset(fset, fset.attributes['collapsed'].value); 
    } 
} 
  
//for collapsable fieldset: 
function constructCollapsableFieldset(fset, collapsed) 
{ 
    //main content: 
    var divContent = fset.getElementsByTagName('div')[0]; 
    if (divContent == null) 
        return; 
  
    if (collapsed == 'true') 
        divContent.style.display = 'none'; 
  
    //+/- ahref: 
    var ahrefText = getAHrefForToogle(collapsed); 
  
    //legend: 
    var legend = fset.getElementsByTagName('legend')[0]; 
    if (legend != null) 
        legend.innerHTML = ahrefText + legend.innerHTML; 
    else 
        fset.innerHTML = '<legend>' + ahrefText + '</legend>' + fset.innerHTML; 
} 
  
function getAHrefForToogle(collapsed) 
{ 
    var ahrefText = "<a onClick='toogleFieldset(this.parentNode.parentNode);' style='text-decoration: none;'>"; 
    ahrefText = ahrefText + getExpanderItem(collapsed) + "</a>&nbsp;"; 
    return ahrefText; 
} 
  
function getExpanderItem(collapsed) 
{ 
    var ecChar; 
    if (collapsed=='true') 
        ecChar='+'; 
    else 
        ecChar='-'; 
  
    return ecChar; 
} 
  
function toogleFieldset(fset) 
{ 
    var ahref = fset.getElementsByTagName('a')[0]; 
    var div = fset.getElementsByTagName('div')[0]; 
  
    if (div.style.display != "none") 
    { 
        ahref.innerHTML=getExpanderItem('true'); 
        div.style.display = 'none'; 
    } 
    else 
    { 
        ahref.innerHTML=getExpanderItem('false'); 
        div.style.display = ''; 
    } 
} 
PHPCODE STARTS HERE

Code: Select all

         
 <FIELDSET>
    <LEGEND class="style1" ACCESSKEY=I><strong>Parent(s) Attending?</strong></LEGEND>
    <TABLE cellspacing="1">
    <tr>
    <td>   <span class="style1">
      <input type="checkbox" value="Y" name="txtparent"   onclick="poponload()"/>
      Yes </span></td>
    <td> <span class="style1">
      <input type="checkbox" value="N"   name="txtparent" >
      <span class="style1">      No</span>    </tr>
    </TABLE>
            </FIELDSET>]




<FIELDSET collapsed="true">
    <LEGEND class="style1" ACCESSKEY=I><strong>Parent Information</strong></LEGEND>
      <div> 
<TABLE cellspacing="10">

 <tr>
    
    <td><label for="mname"><span class="style5">Mother's Name:</span></label></td>

    <td><input name="txtmname" title="Enter Username" id="mname"/> <select name="MSHIRT" id = "mshirt" class = "required">
        	 <option value ="">Please select a shirt size--</option>
              <option value ="Small">Small</option>
              <option value ="Medium">Medium</option>
               <option value ="Large">Large</option>
                <option value ="1X Large">1X Large</option>
                 <option value ="2X Large">2X Large</option>
                 <option value ="3X Large">3X Large</option>
        </select></td>
  </tr>
    
    <tr>
    <td align="right"><span class="style1"><b>Father's Name:</b></span></td>
    <td><input name="txtfname" id="fname" /> <select name="FSHIRT"        id = "fshirt" class = "required">
        	 <option value ="">Please select a shirt size--</option>
              <option value ="Small">Small</option>
              <option value ="Medium">Medium</option>
               <option value ="Large">Large</option>
                <option value ="1X Large">1X Large</option>
                 <option value ="2X Large">2X Large</option>
                 <option value ="3X Large">3X Large</option>
        </select></td>
    </tr>
    
       <tr>
    <td align="right"><span class="style1"><b>Other:</b></span></td>
    <td><input name="txtoname" id="oname" />&nbsp;<select name="OSHIRT"        id = "oshirt" class = "required">
        	 <option value ="">Please select a shirt size--</option>
              <option value ="Small">Small</option>
              <option value ="Medium">Medium</option>
               <option value ="Large">Large</option>
                <option value ="1X Large">1X Large</option>
                 <option value ="2X Large">2X Large</option>
                 <option value ="3X Large">3X Large</option>
        </select></td>
    </tr>
    
    <tr>
    <td align="right"><span class="style1"><b>Address:</b></span></td>
    <td><input name="txtpaddress" id="paddress"/></td>
    </tr>
    
    <tr>
    <td align="right"><span class="style1"><b>City:</b></span></td>
    <td><input name="txtpcity" id="pcity" /></td>
    </tr>
    
    <tr>
        <td align="right"><span class="style1">
                  <label for=state accesskey=S><strong>State:</strong></label>
           </span></td>
        <td><select name="STATE"        id = "pstate" class = "required">
                    <option value ="">Please select a state--</option>
                    <option value ="Alabama">Alabama</option>
                    <option value ="Alaska">Alaska</option>
                    <option value ="Arizona">Arizona</option>
                    <option value ="Arkansas">Arkansas</option>
                    <option value ="California">California</option>
                    <option value ="Colorado">Colorado</option>
                    <option value ="Connecticut">Connecticut</option>
                    <option value ="Delaware">Delaware</option>
                    <option value ="Florida">Florida</option>
                    <option value ="Georgia">Georgia</option>
                    <option value ="Hawaii">Hawaii</option>
                    <option value ="Idaho">Idaho</option>
                    <option value ="Illinois">Illinois</option>
                    <option value ="Indiana">Indiana</option>
                    <option value ="Iowa">Iowa</option>
                    <option value ="Kansas">Kansas</option>
                    <option value ="Kentucky">Kentucky</option>
                    <option value ="Louisiana">Louisiana</option>
                    <option value ="Maine">Maine</option>
                    <option value ="Maryland">Maryland</option>
                    <option value ="Massachusetts">Massachusetts</option>
                    <option value ="Michigan">Michigan</option>
                    <option value ="Minnesota">Minnesota</option>
                    <option value ="Mississippi">Mississippi</option>
                    <option value ="Missouri">Missouri</option>
                    <option value ="Montana">Montana</option>
                    <option value ="Nebraska">Nebraska</option>
                    <option value ="Nevada">Nevada</option>
                    <option value ="New Hampshire">New Hampshire</option>
                    <option value ="New Jersey">New Jersey</option>
                    <option value ="New Mexico">New Mexico</option>
                    <option value ="New York">New York</option>
                    <option value ="North Carolina">North Carolina</option>
                    <option value ="North Dakota">North Dakota</option>
                    <option value ="Ohio">Ohio</option>
                    <option value ="Oklahoma">Oklahoma</option>
                    <option value ="Oregon">Oregon</option>
                    <option value ="Pennsylvania">Pennsylvania</option>
                    <option value ="Rhode Island">Rhode Island</option>
                    <option value ="South Carolina">South Carolina</option>
                    <option value ="South Dakota">South Dakota</option>
                    <option value ="Tennessee">Tennessee</option>
                    <option value ="Texas">Texas</option>
                    <option value ="Utah">Utah</option>
                    <option value ="Vermont">Vermont</option>
                    <option value ="Virginia">Virginia</option>
                    <option value ="Washington">Washington</option>
                    <option value ="West Virginia">West Virginia</option>
                    <option value ="Wisconsin">Wisconsin</option>
                    <option value ="Wyoming">Wyoming</option>
                  </select>
        </td>
      </tr>
    
    <tr>
    <td align="right"><span class="style1"><b>Zip:</b></span></td>
    <td><input name="txtpZip" id="pzip" /></td>
    </tr>
    
    
    <tr>
    <td align="right"><span class="style1"><b>Home Phone:</b></span></td>
    <td><input name="txtphomephone" id="phomephone"/></td>
    </tr>
 
    <tr>
    <td align="right"><span class="style1"><b>Cell Phone:</b></span></td>
    <td><input name="txtpcellphone" id="pcellphone" /></td>
    </tr>
    
    
    <tr>
    <td align="right"><span class="style1"><b>Email:</b></span></td>
    <td><input name="txtpemail" id="pemail" /></td>
    </tr> 
    
            
</table>
</TABLE>
</div>
</FIELDSET>

Re: HELP WITH EXPANDING FIELDSETS

Posted: Thu Jan 12, 2012 11:09 am
by pickle
Moved to the Javascript forum.

I think you're going about this all wrong - constructing some of the html code in javascript is a bad idea. From what I can see, you simply have a number of fieldsets with checkboxes. Once the checkbox is checked, you want the contents of the fieldset to appear. Is this correct?

Re: HELP WITH EXPANDING FIELDSETS

Posted: Mon Jan 23, 2012 11:13 am
by ssumter
Yes that is correct. When the user clicks yes checkbox, i want to expand the "Parent's Information" fieldset. Can you show me how to do this the correct way. Thanks.