Checkbox to toggle <div> bit of form...

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • plumba
    New Member
    • Aug 2007
    • 57
    #1

    Checkbox to toggle <div> bit of form...

    Hi

    I have a check box which when ticked displays the sumit buttons of a form and gives the checkbox field a value of "agree".

    I would like to set the check box to hide the section of the form if the check is removed.
    I have included a small sample code from my form:
    [HTML]<html>
    <script>
    function toggle_display( ) {
    var form = document.getEle mentById('hides ubmit');
    var thanks = document.getEle mentById('submi t_group');
    form.style.disp lay ='none';
    thanks.style.di splay='block';
    }
    </script>
    </head>

    <body>
    <form method="post" action="mailto: email@web.com?s ubject=EnrolReq " enctype="text/plain" subject="New User" name="FrontPage _Form1" onSubmit="retur n FrontPage_Form1 _Validator(this )" language="JavaS cript">
    &nbsp;<table border="0" width="70%" id="table4" height="82">

    <input type="checkbox" name="agreechec k" id="hidesubmit " value="Agreed" onClick="toggle _display();"/>
    By placing a check in the box you are agreeing to the above Access Authorisation Statement.</font></b></p>
    <div id="submit_grou p" style="display: none;">
    <table border="0" width="70%" id="table22" bgcolor="#CCFFF F">
    <tr>
    <td>
    <p align="center"> <font size="2">When you click 'Submit' a screen will pop up indicating a program is sending an Email on your behalf.<br>
    <b>You must click YES to submit the form.</b></font></td>
    </tr>
    </table>
    <p>

    <input type="hidden" name="EOR" value="">
    <input type="Submit" value="Submit!" >
    <input type="reset" value="Clear Form">
    </p>
    </div>
    </form>

    </body>

    </html>[/HTML]

    It's a break donw of the form but the probelm is from line 16. It works one way (it displays the extra bit of the form) but dowsn't hide it again if the check is removed...

    Any ideas???
    Tags: None
    • epots9
      Recognized Expert Top Contributor
      • May 2007
      • 1352
      #2
      try this:
      [code=javascript]
      function toggle_display( )
      {
      var form = document.getEle mentById('hides ubmit');
      var thanks = document.getEle mentById('submi t_group');
      ((form.checked) ? thanks.style.di splay='block': thanks.style.di splay='none');
      }
      [/code]

      test that out and tell us how it goes.
      good luck.

        Comment

        • plumba
          New Member
          • Aug 2007
          • 57
          #3
          Originally posted by epots9
          try this:
          [code=javascript]
          function toggle_display( )
          {
          var form = document.getEle mentById('hides ubmit');
          var thanks = document.getEle mentById('submi t_group');
          ((form.checked) ? thanks.style.di splay='block': thanks.style.di splay='none');
          }
          [/code]

          test that out and tell us how it goes.
          good luck.
          Many thanks for such a speedy response epots9!!

          Worked a treat!!!

          GENUIS!!

            Comment

            • epots9
              Recognized Expert Top Contributor
              • May 2007
              • 1352
              #4
              glad i could help. come back anytime u need to ask a question.

                Comment

                • plumba
                  New Member
                  • Aug 2007
                  • 57
                  #5
                  Originally posted by epots9
                  glad i could help. come back anytime u need to ask a question.
                  Just one quick questions... In the above script you posted, on line 5:
                  [HTML]((form.checked) ? thanks.style.di splay='block': thanks.style.di splay='none');[/HTML]

                  what does the 'thanks' do?? the 'thanks' is not refered to anywhere else in the script, I have tried renaming it but the function stops working.... Even the checkbox which calls the function doesn't have any reference to 'thanks'.
                  Thanks :)

                    Comment

                    • epots9
                      Recognized Expert Top Contributor
                      • May 2007
                      • 1352
                      #6
                      thanks refers to this:

                      [code=javascript]
                      var thanks = document.getEle mentById('submi t_group');
                      [/code]

                      i took that code from your first post. if u want to change it u'll have to change it on that line above and on line 5.

                        Comment

                        • plumba
                          New Member
                          • Aug 2007
                          • 57
                          #7
                          Originally posted by plumba
                          Just one quick questions... In the above script you posted, on line 5:
                          [HTML]((form.checked) ? thanks.style.di splay='block': thanks.style.di splay='none');[/HTML]

                          what does the 'thanks' do?? the 'thanks' is not refered to anywhere else in the script, I have tried renaming it but the function stops working.... Even the checkbox which calls the function doesn't have any reference to 'thanks'.
                          Thanks :)
                          Excuse my ignorance!!! 'thanks' is defined in line 4!!

                          [HTML]var thanks = document.getEle mentById('submi t_group'); [/HTML]

                          I'll pay attention!!!

                            Comment

                            Previous template Next
                            Working...