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

Report · Jun 19, 2007

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.

Report · Jun 19, 2007

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>
>

Report · Jun 20, 2007

I am using Dreamweaver.

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

can this be done in java script?

Report · Jun 21, 2007

"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/

Report · Jun 26, 2007

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>

Report · Jun 26, 2007

'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>
>
>