7 Replies Latest reply on Oct 29, 2008 4:05 AM by Newsgroup_User

    Show / Hide form elements

    TechStudio
      Hi...

      I just want to know, how I can create the following in Dreamweaver CS3:

      Eg: I have 4 form elements: Active, Name, Surname, Comments

      Now. When viewing the page containing the form, it should only display the Active Tickbox. WHEN you have ticked the Active tickbox, it should then UNHIDE the Name, Surname and Comments elements.

      Any Ideas how it could be done using Dreamweaver...? Even if it can be done like except hiding elements, just make the other elements "locked" or grayed out...?

      Thanx...
        • 1. Re: Show / Hide form elements
          delaneypub Level 1
          If you write the line of Javascript to change the form element property, you can apply it to the checkbox in Dreamweaver in the Behavior panel, Call Javascript.
          • 2. Re: Show / Hide form elements
            Level 7
            Try this: http://javascript.internet.com/forms/toggle-additional-info.html

            --

            Walt


            "RadeonX" <webforumsuser@macromedia.com> wrote in message
            news:ge4b8n$8gs$1@forums.macromedia.com...
            > Hi...
            >
            > I just want to know, how I can create the following in Dreamweaver CS3:
            >
            > Eg: I have 4 form elements: Active, Name, Surname, Comments
            >
            > Now. When viewing the page containing the form, it should only display the
            > Active Tickbox. WHEN you have ticked the Active tickbox, it should then
            > UNHIDE
            > the Name, Surname and Comments elements.
            >
            > Any Ideas how it could be done using Dreamweaver...? Even if it can be
            > done
            > like except hiding elements, just make the other elements "locked" or
            > grayed
            > out...?
            >
            > Thanx...
            >


            • 3. Re: Show / Hide form elements
              Level 7
              You can easily use DW's ChangeProperty behavior to change the display
              property of a wrapper around those elements from "none" (the start
              condition) to "block" onclick.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "RadeonX" <webforumsuser@macromedia.com> wrote in message
              news:ge4b8n$8gs$1@forums.macromedia.com...
              > Hi...
              >
              > I just want to know, how I can create the following in Dreamweaver CS3:
              >
              > Eg: I have 4 form elements: Active, Name, Surname, Comments
              >
              > Now. When viewing the page containing the form, it should only display the
              > Active Tickbox. WHEN you have ticked the Active tickbox, it should then
              > UNHIDE
              > the Name, Surname and Comments elements.
              >
              > Any Ideas how it could be done using Dreamweaver...? Even if it can be
              > done
              > like except hiding elements, just make the other elements "locked" or
              > grayed
              > out...?
              >
              > Thanx...
              >

              • 4. Re: Show / Hide form elements
                TechStudio Level 1
                The link for the JavaScript thing looks like it will do the Job...?

                But if I may ask, how exactly should I go about using the ChangeProperty behavior...?

                Thanx for all your help...!
                • 5. Re: Show / Hide form elements
                  Level 7
                  Select the trigger checkbox, and apply the behavior to do a ChangeProperty
                  on the display style for the container for the other fields to "block", with
                  an event of 'onchange'.

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "RadeonX" <webforumsuser@macromedia.com> wrote in message
                  news:ge6ft9$987$1@forums.macromedia.com...
                  > The link for the JavaScript thing looks like it will do the Job...?
                  >
                  > But if I may ask, how exactly should I go about using the ChangeProperty
                  > behavior...?
                  >
                  > Thanx for all your help...!

                  • 6. Re: Show / Hide form elements
                    TechStudio Level 1
                    OK... Is there maybe a step-by-step instruction or an Example which I can use to help me, as I am rather new with this kind of stuff...? Thanx...
                    • 7. Re: Show / Hide form elements
                      Level 7
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns=" http://www.w3.org/1999/xhtml">
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                      <title>Untitled Document</title>
                      <meta http-equiv="imagetoolbar" content="no" />
                      <meta name="MSSmartTagsPreventParsing" content="TRUE" />
                      <meta name="robots" content="index,follow" />
                      <script type="text/javascript">
                      <!--
                      function MM_changeProp(objId,x,theProp,theValue) { //v9.0
                      var obj = null; with (document){ if (getElementById)
                      obj = getElementById(objId); }
                      if (obj){
                      if (theValue == true || theValue == false)
                      eval("obj.style."+theProp+"="+theValue);
                      else eval("obj.style."+theProp+"='"+theValue+"'");
                      }
                      }
                      //-->
                      </script>
                      <style type="text/css">
                      #foo { display:none; }
                      </style>
                      </head>
                      <body>
                      <form id="form1" name="form1" method="post" action="">
                      <p>
                      <label for="checkme">Want more?</label>
                      <input name="checkme" type="checkbox" id="checkme"
                      onclick="MM_changeProp('foo','','display','block','DIV')" />
                      </p>
                      <div id="foo"><p>
                      <label for="field1">Thing One</label>
                      <input type="text" name="field1" id="field1" />
                      </p>
                      <p>
                      <label for="field2">Thing Two</label>
                      <input type="text" name="field2" id="field2" />
                      </p></div>
                      </form>
                      </body>
                      </html>


                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      ==================


                      "RadeonX" <webforumsuser@macromedia.com> wrote in message
                      news:ge8tl2$oi8$1@forums.macromedia.com...
                      > OK... Is there maybe a step-by-step instruction or an Example which I can
                      > use to help me, as I am rather new with this kind of stuff...? Thanx...