[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Enable / Disable form fields with a checkbox

Posted on 2004-11-29
13
Medium Priority
?
33,624 Views
Last Modified: 2013-12-24
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
0
Comment
Question by:jturkington
13 Comments
 
LVL 11

Expert Comment

by:hart
ID: 12694342
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
 
LVL 11

Expert Comment

by:hart
ID: 12694358
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
 

Author Comment

by:jturkington
ID: 12694457
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
Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

 

Author Comment

by:jturkington
ID: 12694460
I also forgot to ask hart

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

Jonathan
0
 

Author Comment

by:jturkington
ID: 12694564
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
 
LVL 11

Expert Comment

by:hart
ID: 12694650
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
 
LVL 11

Expert Comment

by:hart
ID: 12694655
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
 

Author Comment

by:jturkington
ID: 12694668
Its okay hart its for a local intranet IE6 , im using CSS for styles
0
 
LVL 11

Accepted Solution

by:
hart earned 2000 total points
ID: 12694740
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
 

Author Comment

by:jturkington
ID: 12694744
Hart the points are yours , thankyou for all your help

Best regards

Jonathan
0
 
LVL 11

Expert Comment

by:hart
ID: 12695242
u r welcome :-)

regards
hart
0
 

Expert Comment

by:jollymon6672
ID: 12787137
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
 
LVL 7

Expert Comment

by:black0ps
ID: 12788869
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…
Suggested Courses
Course of the Month20 days, 8 hours left to enroll

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question