asked on

Enable / Disable form fields with a checkbox

Looking abit of advice on the best way to enable or disable form fields based on whether certain checkboxs have been ticked

For example if i have two checkboxes, I tick "check box one" which in turn enables a text box field and a textarea field. If I uncheck "check box one" the text box and text area are disabled again. The outcome I eventually want is to have 5 or 6 checkboxes enable and disabling a combination of form fields based on whether they are checked or not.

Any example CF code would be much appreciated or better ways of performing this task eg using a multiple select area instead of checkboxs ?

Jonathan

hart

this can be done with javascript... it can also be done through CF but then the page will refresh everytime u click on the checkbox which wouldn't be that gr8

-------------------- javascript solution ----------------------

<html>
<head>
<title>Enable / Disable</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>
</head>
<body>
<form name="frm" method="post" action="somepage name">
<input type="checkbox" name="chk1" value="1" OnClick="fncEnable(1)">
<input type="text" name="txt1" value="" DISABLED>
<textarea rows="10" cols="10" name="txtarea1" disabled></textarea>
</form>
</body>
</html>

PS: in a loop form the check boxes with names as chk1, chk2, chk3 etc... and the corresponding text box and textarea names will also have 2,3,4 appended to it.. and in the function just send the number...

Regards
Hart

hart

Also if you want the value entered to be cleared once they are unchecked

then add this
function fncEnable(chknum)
{
if(document.frm["chk"+chknum].checked == true)
{
document.frm["txt"+chknum].disabled = false;
document.frm["txtarea"+chknum].disabled = false;
}
else
{
document.frm["txt"+chknum].value= '';
document.frm["txtarea"+chknum].value = '';
document.frm["txt"+chknum].disabled = true;
document.frm["txtarea"+chknum].disabled = true;
}
}

in CF you will have to submit the form everytime to the same page when the checkbox is checked or unchecked and then put cfif conditions around the text box and textarea...

let me know if you want just the CF solution

Regards
Hart

jturkington

ASKER

Thanks for your help Hart

The javascript function works well, I am still a little confused about how to add multiple check boxes "PS: in a loop form the check boxes with names as chk1, chk2, chk3 etc... and the corresponding text box and textarea names will also have 2,3,4 appended to it.. and in the function just send the number..."

(JavaScript isnt my greatest strength !) any code would be much appreciated to get my head around it !

Jonathan

jturkington

ASKER

I also forgot to ask hart

how do you change the color of the form fields once they are disabled ?

Jonathan

jturkington

ASKER

Got it working Hart, I apologise for my lack of common sense !! (LOL)

Just not sure how to color the form fields once they are disabled ?

Jonathan

hart

Its ok it happens with everyone in the start :-)
play with the following code and assign the colors u want :-)

<html>
<head>
<title>Enable / Disable</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>
</head>
<body>
<form name="frm" method="post" action="somepage name">
<input type="checkbox" name="chk1" value="1" OnClick="fncEnable(1)">
<input type="text" name="txt1" value="" DISABLED STYLE="background:EEEEEE">
<textarea rows="10" cols="10" name="txtarea1" disabled STYLE="background:EEEEEE"></textarea>
</form>
</body>
</html>

Regards
Hart

hart

but do remember that the style attrib and the disabled options don't work in Netscape versions..
hope thats fine with u

Regards
Hart

jturkington

ASKER

Its okay hart its for a local intranet IE6 , im using CSS for styles

ASKER CERTIFIED SOLUTION

hart

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jturkington

ASKER

Hart the points are yours , thankyou for all your help

Best regards

Jonathan

hart

u r welcome :-)

regards
hart

jollymon6672

Has anyone tried applying this function to a "image button"? I have been successful in using it for standard form elements but not image buttons.

black0ps

Just make the image button invisible:

add these lines of code to your javascript
document.frm["imgbutton"+chknum].style.dispaly = "none";

then on the else:
document.frm["imgbutton"+chknum].style.dispaly = "block";