HELP WITH EXPANDING FIELDSETS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ssumter
Forum Newbie
Posts: 2
Joined: Thu Jan 12, 2012 10:47 am

HELP WITH EXPANDING FIELDSETS

Post 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>
Last edited by pickle on Thu Jan 12, 2012 11:05 am, edited 1 time in total.
Reason: Cleaning up syntax tags
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: HELP WITH EXPANDING FIELDSETS

Post 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ssumter
Forum Newbie
Posts: 2
Joined: Thu Jan 12, 2012 10:47 am

Re: HELP WITH EXPANDING FIELDSETS

Post 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.
Post Reply