5 Replies Latest reply on Jun 26, 2007 11:53 AM by Newsgroup_User

    Need help for Javascript CheckBOX(s) show Hide visible invisble corresponding TEXTBOX(s)

    silviasalsa Level 1
      Javascript CheckBOX(s)
      show Hide visible invisble corresponding TEXTBOX(s)


      IF check box1 is checked then textbox1 is visible otherwise if it is unchecked then the corresponding textbox it is invisible.

      IF check box2 is checked then textbox2 is visible otherwise if it is unchecked then the corresponding textbox it is invisible.

      IF check box3 is checked then textbox3 is visible otherwise if it is unchecked then the corresponding textbox it is invisible.

        • 1. Re: Javascript CheckBOX(s) show Hide visible invisble corresponding TEXTBOX(s)
          Level 7
          What is you editor of choice? If you are using DW there are a few extension
          out there you could use.

          Being that you gave all checkboxes the same name, I assume you don't want to
          allow multiple selections. If that is the case you will also have clear any
          hidden text box values as they would still be submitted with the form.

          --
          Bryan Ashcraft (remove brain to reply)
          Web Application Developer
          Wright Medical Technology, Inc.
          ------------------------------------------------------------------
          Macromedia Certified Dreamweaver Developer
          Adobe Community Expert (DW) :: http://www.adobe.com/communities/experts/



          "silviasalsa" <webforumsuser@macromedia.com> wrote in message
          news:f58sgv$r4r$1@forums.macromedia.com...
          > Javascript CheckBOX(s)
          > show Hide visible invisble corresponding TEXTBOX(s)
          >
          >
          > IF check box1 is checked then textbox1 is visible otherwise if it is
          > unchecked
          > then the corresponding textbox it is invisible.
          >
          > IF check box2 is checked then textbox2 is visible otherwise if it is
          > unchecked
          > then the corresponding textbox it is invisible.
          >
          > IF check box3 is checked then textbox3 is visible otherwise if it is
          > unchecked
          > then the corresponding textbox it is invisible.
          >
          >
          >
          > <html>
          > <head>
          > </head>
          >
          > <body>
          >
          >
          > <h1> </h1>
          >
          > <table>
          > <cfform action="ACTpage.cfm" method="POST">
          > <tr>
          > <td>CheckBox1:</td>
          > <td><center><input type="checkbox" name="checkboxgroup"
          > value="checkboxvalue1"
          > checked></center></td>
          > </tr>
          > <tr>
          > <td>CheckBox2</td>
          > <td><center><input type="checkbox" name="checkboxgroup"
          > value="checkboxvalue2"
          > Unchecked></center></td>
          > </tr>
          > <tr>
          > <td>CheckBox3</td>
          > <td><center><input type="checkbox" name="checkboxgroup"
          > value="checkboxvalue3"
          > unchecked></center></td>
          > </tr>
          >
          > <!--------------------->
          >
          > <tr><td>InputBox1</td>
          > <td>
          > <input type="Text"
          > name="InputBox1"
          > Value=""
          > size="22"
          > maxlength="20">
          > </td>
          > <tr></tr>
          > <tr><td>InputBox2</td>
          > <td>
          > <input type="Text"
          > name="InputBox2"
          > Value=""
          > size="22">
          > </td>
          > <tr></tr>
          > <tr><td>InputBox3</td>
          > <td>
          > <input type="Text"
          > name="InputBox3"
          > Value=""
          > size="22">
          > </td>
          > <tr></tr>
          > <td> </td>
          > <td>
          > <input type="submit" value="Submit to Database">
          > </td>
          > </tr>
          >
          > </cfform>
          > </table>
          >
          > </body>
          > </html>
          >


          • 2. Re: Javascript CheckBOX(s) show Hide visible invisble corresponding TEXTBOX(s)
            silviasalsa Level 1
            I am using Dreamweaver.

            yes i want the check box to be checked as one or more.

            can this be done in java script?
            • 3. Re: Javascript CheckBOX(s) show Hide visible invisble corresponding TEXTBOX(s)
              Level 7
              "silviasalsa" <webforumsuser@macromedia.com> wrote in message
              news:f5c3ia$sf6$1@forums.macromedia.com...
              >I am using Dreamweaver.
              >
              > yes i want the check box to be checked as one or more.
              >
              > can this be done in java script?


              Yes. Keep in mind that I am not a JS guru by any means, but this has worked
              for me.


              function checkSubDisplay(ckd,obj) {
              var obj = document.getElementById(obj);
              if (ckd) {
              obj.style.display = 'block';
              } else {
              obj.style.display = 'none';
              }

              Then you would use something like the following on your checkbox inputs:
              <input name="someName" type="checkbox" id="someID"
              onclick="checkSubDisplay(this.checked,'nameOfDivToToggle')" />

              --
              Bryan Ashcraft (remove brain to reply)
              Web Application Developer
              Wright Medical Technology, Inc.
              ------------------------------------------------------------------
              Macromedia Certified Dreamweaver Developer
              Adobe Community Expert (DW) :: http://www.adobe.com/communities/experts/


              • 4. Re: Javascript CheckBOX(s) show Hide visible invisble corresponding TEXTBOX(s)
                silviasalsa Level 1
                Thanks
                i put in the html head and body.
                but it is showing a check box only.

                am i missing a piece of the code?
                here is the code:

                Thanks



                <!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>
                <script type="text/javascript" language="JavaScript">
                function checkSubDisplay(ckd,obj) {
                var obj = document.getElementById(obj);
                if (ckd) {
                obj.style.display = 'block';
                } else {
                obj.style.display = 'none';
                }
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Untitled Document</title>
                </script></head>

                <body>
                <input name="someName" type="checkbox" id="someID"
                onclick="checkSubDisplay(this.checked,'nameOfDivToToggle')" />
                </body>
                </html>
                • 5. Re: Javascript CheckBOX(s) show Hide visible invisble corresponding TEXTBOX(s)
                  Level 7
                  'someName', 'someID' and 'nameOfDivToToggle' are to be replace with actual
                  values. For example 'nameOfDivToToggle' should be replaced with the ID of
                  the element you want to show/hide.

                  --
                  Bryan Ashcraft (remove BRAIN to reply)
                  Web Application Developer
                  Wright Medical Technology, Inc.
                  -------------------------------------------------------------------------


                  Macromedia Certified Dreamweaver Developer
                  Adobe Community Expert (DW) :: http://www.adobe.com/communities/experts/
                  "silviasalsa" <webforumsuser@macromedia.com> wrote in message
                  news:f5rk96$hrd$1@forums.macromedia.com...
                  > Thanks
                  > i put in the html head and body.
                  > but it is showing a check box only.
                  >
                  > am i missing a piece of the code?
                  > here is the code:
                  >
                  > Thanks
                  >
                  >
                  >
                  > <!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>
                  > <script type="text/javascript" language="JavaScript">
                  > function checkSubDisplay(ckd,obj) {
                  > var obj = document.getElementById(obj);
                  > if (ckd) {
                  > obj.style.display = 'block';
                  > } else {
                  > obj.style.display = 'none';
                  > }
                  > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                  > <title>Untitled Document</title>
                  > </script></head>
                  >
                  > <body>
                  > <input name="someName" type="checkbox" id="someID"
                  > onclick="checkSubDisplay(this.checked,'nameOfDivToToggle')" />
                  > </body>
                  > </html>
                  >
                  >