Hide/show table on radio box.

Ok, so I'm rather confused. I'm sure this should be moving stuff onclick to the function "showESLBox()" where from their it should be both saving the information to another file( so long as the data get's their it should be fine) and then deciding to show the info or hiding it. My question is, "What am I doing wrong here"?
function showESLBox() {
    if(document.forms[0].hideESL[0].checked) {
		document.forms[0].SchoolName.value  = document.forms[0].setSchoolName.value;
 		document.forms[0].districtName.value  = document.forms[0].setDistrictName.value;
 		document.forms[0].groupLeader.value  = document.forms[0].setGroupLeader.value;
        document.forms[0].gradeLevelTeaching.value=document.forms[0].setGradeLevelTeaching.value;
        document.forms[0].grantApplied.value  = document.forms[0].setGrantApplied.value;
		document.forms[0].ESL.value="set";
 		updateList(document.forms[0],0);
        e=document.getElementById("app1");
        e.style.display='none';
 	    }
     else {
        e=document.getElementById("app1");
        e.style.display='block';
		document.forms[0].ESL.value="set";
     }
 }

<%-- asldkgjsag --%>

<td>
                        <html:radio property="hideESL" value="false" onclick="showESLBox();"/>Yes<html:radio property="hideESL" value="true" onclick="showESLBox();"/>No
                    </td>

<%-- confirm stuffs --%>

<div id='app1' >
<br>
 <TABLE WIDTH="600" CELLSPACING="1" CELLPADDING="1" >
    <TR>
       <td align="left" nowrap="nowrap" width="110">School Name
       <td align="left"><input text property="SchoolName" size="50" maxlength="200"  /></td>
    </TR>
    <TR>
       <td align="left" nowrap="nowrap" width="110">District Name
       <td align="left"><input text property="districtName" size="50" /></td>
    </TR>
    <tr>
       <td align="left" nowrap="nowrap" width="110">Group Leader
       <td align="left"><input text property="groupLeader" size="50" /></td>
    </TR>
    <tr>
       <td align="left" nowrap="nowrap" width="110">Grade Level Teaching
       <td align="left"><input text property="gradeLevelTeaching" size="50" /></td>
    </TR>
    <tr>
       <td align="left" nowrap="nowrap" width="110">Grant Applied
       <td align="left"><input text property="grantApplied" size="50" /></td>
    </TR>
 </table>
</div>

Comments

  • Here is the working code:
    <script>
        function showESLBox() {
            if (document.forms[0].hideESL[0].checked) {
                //document.forms[0].SchoolName.value = document.forms[0].setSchoolName.value;
                //document.forms[0].districtName.value = document.forms[0].setDistrictName.value;
                //document.forms[0].groupLeader.value = document.forms[0].setGroupLeader.value;
                //document.forms[0].gradeLevelTeaching.value = document.forms[0].setGradeLevelTeaching.value;
                //document.forms[0].grantApplied.value = document.forms[0].setGrantApplied.value;
                //document.forms[0].ESL.value = "set";
                //updateList(document.forms[0], 0);
                e = document.getElementById("app1");
                e.style.display = 'none';
            }
            else {
                e = document.getElementById("app1");
                e.style.display = 'block';
                //document.forms[0].ESL.value = "set";
            }
        }
    </script>
    <form>
                            <input type="radio" name="hideESL" value="false" onclick="showESLBox();" />Yes<br />
        <input type="radio" name="hideESL" value="true" onclick="showESLBox();" />No<br />
    
    
    
    <div id='app1' >
    <br>
     <TABLE WIDTH="600" CELLSPACING="1" CELLPADDING="1" >
        <TR>
           <td align="left" nowrap="nowrap" width="110">School Name
           <td align="left"><input text property="SchoolName" size="50" maxlength="200"  /></td>
        </TR>
        <TR>
           <td align="left" nowrap="nowrap" width="110">District Name
           <td align="left"><input text property="districtName" size="50" /></td>
        </TR>
        <tr>
           <td align="left" nowrap="nowrap" width="110">Group Leader
           <td align="left"><input text property="groupLeader" size="50" /></td>
        </TR>
        <tr>
           <td align="left" nowrap="nowrap" width="110">Grade Level Teaching
           <td align="left"><input text property="gradeLevelTeaching" size="50" /></td>
        </TR>
        <tr>
           <td align="left" nowrap="nowrap" width="110">Grant Applied
           <td align="left"><input text property="grantApplied" size="50" /></td>
        </TR>
     </table>
    </div>
    </form>
    
    I've commented the code lines because the input fields with property 'names' = 'setSchoolName setDistrictName setGroupLeader ...' don't exist.If such fields don't exist in your HTML then remove these lines otherwise uncomment them and it should work like charm.
Sign In or Register to comment.