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
jturkingtonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hartCommented:
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">
   <!--
   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].disabled = true;
            document.frm["txtarea"+chknum].disabled = true;
      }
   }  
   //-->
   </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
0
hartCommented:
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
0
jturkingtonAuthor Commented:
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
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

jturkingtonAuthor Commented:
I also forgot to ask hart

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

Jonathan
0
jturkingtonAuthor Commented:
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
0
hartCommented:
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">
   <!--
   function fncEnable(chknum)
   {
               if(document.frm["chk"+chknum].checked == true)
            {
                  document.frm["txt"+chknum].style.background = 'FFFFFF';
                  document.frm["txt"+chknum].disabled = false;
                  document.frm["txtarea"+chknum].style.background = 'FFFFFF';
                  document.frm["txtarea"+chknum].disabled = false;
            }
            else
            {
                  document.frm["txt"+chknum].style.background = 'EEEEEE';
                  document.frm["txt"+chknum].disabled = true;
                  document.frm["txtarea"+chknum].style.background = 'EEEEEE';
                  document.frm["txtarea"+chknum].disabled = true;
            }
   }  
   //-->
   </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
0
hartCommented:
but do remember that the style attrib and the disabled options don't work in Netscape  versions..
hope thats fine with u

Regards
Hart
0
jturkingtonAuthor Commented:
Its okay hart its for a local intranet IE6 , im using CSS for styles
0
hartCommented:
ok then its fine...
make two classes then one having the background as grey or which ever color u want and the other one white...

and change these accordingly in the function...

for eg:

<html>
<head>
   <title>Enable / Disable</title>
   <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
   <!--
   function fncEnable(chknum)
   {
               if(document.frm["chk"+chknum].checked == true)
            {
                  document.frm["txt"+chknum].className = 'enabledclass';
                  document.frm["txt"+chknum].disabled = false;
                  document.frm["txtarea"+chknum].className = 'enabledclass';                  
                  document.frm["txtarea"+chknum].disabled = false;
            }
            else
            {
                  document.frm["txt"+chknum].className = 'disabledclass';
                  document.frm["txt"+chknum].disabled = true;
                  document.frm["txtarea"+chknum].className = 'disabledclass';
                  document.frm["txtarea"+chknum].disabled = true;
            }
   }  
   //-->
   </SCRIPT>
   <style>
         .enabledclass{background:ffffff}
      .disabledclass{background:efefef}
   </style>
</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 CLASS="disabledclass">
         <textarea rows="10" cols="10" name="txtarea1" disabled CLASS="disabledclass"></textarea>
   </form>
</body>
</html>

hart
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jturkingtonAuthor Commented:
Hart the points are yours , thankyou for all your help

Best regards

Jonathan
0
hartCommented:
u r welcome :-)

regards
hart
0
jollymon6672Commented:
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.
0
black0psCommented:
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";
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.