Hide/show table on radio box.

    • 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"?

      HTML Source Code

      1. function showESLBox() {
      2. if(document.forms[0].hideESL[0].checked) {
      3. document.forms[0].SchoolName.value = document.forms[0].setSchoolName.value;
      4. document.forms[0].districtName.value = document.forms[0].setDistrictName.value;
      5. document.forms[0].groupLeader.value = document.forms[0].setGroupLeader.value;
      6. document.forms[0].gradeLevelTeaching.value=document.forms[0].setGradeLevelTeaching.value;
      7. document.forms[0].grantApplied.value = document.forms[0].setGrantApplied.value;
      8. document.forms[0].ESL.value="set";
      9. updateList(document.forms[0],0);
      10. e=document.getElementById("app1");
      11. e.style.display='none';
      12. }
      13. else {
      14. e=document.getElementById("app1");
      15. e.style.display='block';
      16. document.forms[0].ESL.value="set";
      17. }
      18. }
      19. <%-- asldkgjsag --%>
      20. <td>
      21. <html:radio property="hideESL" value="false" onclick="showESLBox();"/>Yes<html:radio property="hideESL" value="true" onclick="showESLBox();"/>No
      22. </td>
      23. <%-- confirm stuffs --%>
      24. <div id='app1' >
      25. <br>
      26. <TABLE WIDTH="600" CELLSPACING="1" CELLPADDING="1" >
      27. <TR>
      28. <td align="left" nowrap="nowrap" width="110">School Name
      29. <td align="left"><input text property="SchoolName" size="50" maxlength="200" /></td>
      30. </TR>
      31. <TR>
      32. <td align="left" nowrap="nowrap" width="110">District Name
      33. <td align="left"><input text property="districtName" size="50" /></td>
      34. </TR>
      35. <tr>
      36. <td align="left" nowrap="nowrap" width="110">Group Leader
      37. <td align="left"><input text property="groupLeader" size="50" /></td>
      38. </TR>
      39. <tr>
      40. <td align="left" nowrap="nowrap" width="110">Grade Level Teaching
      41. <td align="left"><input text property="gradeLevelTeaching" size="50" /></td>
      42. </TR>
      43. <tr>
      44. <td align="left" nowrap="nowrap" width="110">Grant Applied
      45. <td align="left"><input text property="grantApplied" size="50" /></td>
      46. </TR>
      47. </table>
      48. </div>
      Display All
    • Here is the working code:

      JavaScript Source Code

      1. <script>
      2. function showESLBox() {
      3. if (document.forms[0].hideESL[0].checked) {
      4. //document.forms[0].SchoolName.value = document.forms[0].setSchoolName.value;
      5. //document.forms[0].districtName.value = document.forms[0].setDistrictName.value;
      6. //document.forms[0].groupLeader.value = document.forms[0].setGroupLeader.value;
      7. //document.forms[0].gradeLevelTeaching.value = document.forms[0].setGradeLevelTeaching.value;
      8. //document.forms[0].grantApplied.value = document.forms[0].setGrantApplied.value;
      9. //document.forms[0].ESL.value = "set";
      10. //updateList(document.forms[0], 0);
      11. e = document.getElementById("app1");
      12. e.style.display = 'none';
      13. }
      14. else {
      15. e = document.getElementById("app1");
      16. e.style.display = 'block';
      17. //document.forms[0].ESL.value = "set";
      18. }
      19. }
      20. </script>
      21. <form>
      22. <input type="radio" name="hideESL" value="false" onclick="showESLBox();" />Yes<br />
      23. <input type="radio" name="hideESL" value="true" onclick="showESLBox();" />No<br />
      24. <div id='app1' >
      25. <br>
      26. <TABLE WIDTH="600" CELLSPACING="1" CELLPADDING="1" >
      27. <TR>
      28. <td align="left" nowrap="nowrap" width="110">School Name
      29. <td align="left"><input text property="SchoolName" size="50" maxlength="200" /></td>
      30. </TR>
      31. <TR>
      32. <td align="left" nowrap="nowrap" width="110">District Name
      33. <td align="left"><input text property="districtName" size="50" /></td>
      34. </TR>
      35. <tr>
      36. <td align="left" nowrap="nowrap" width="110">Group Leader
      37. <td align="left"><input text property="groupLeader" size="50" /></td>
      38. </TR>
      39. <tr>
      40. <td align="left" nowrap="nowrap" width="110">Grade Level Teaching
      41. <td align="left"><input text property="gradeLevelTeaching" size="50" /></td>
      42. </TR>
      43. <tr>
      44. <td align="left" nowrap="nowrap" width="110">Grant Applied
      45. <td align="left"><input text property="grantApplied" size="50" /></td>
      46. </TR>
      47. </table>
      48. </div>
      49. </form>
      Display All

      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.