Gray Out Fields

[trojnfn]

I have a cf form that has 10 cfinput fields. Depending on a criteria (such as payroll number, or job title, etc.) I want certain fields to be grayed out so that there can be no entry. I still want to display all 10 on the form, but only allow entry to those that meet the criteria and gray out the rest, to prevent entry.

My initial idea was to use cfif to determine if the criteria is met or not, and use a gray image (gif or jpg) in place of the cfinput.

But there must be a better way and techinque. Thanks for any help.

[davidsimms]

trojnfn:

Form fields are grayed out by adding the disabled attribute to the form item tag. You can of course use conditional processing to determine when to include the disabled attribute.

[trojnfn]

Thanks for the response. Never used it before, but I guess it does not work for my version of cf, so I had to use input instead, and it works. Also discovered that readonly works too.

[trojnfn]

I have to revisit the gray out field issue because something else came up. Using disabled or read only in the input works, fine.
However, this is what I need to do now. In the form, there are three buttons, say Red, Blue, and Green. And there are ten input fields. If radio button Red is selected, then I only want to display inputs 1, 2, 7, and 10 for entry, and gray out the rest. If Blue is selected, then only allow 9 and 10 for entry, and gray out the rest, etc. I assume I would have to use cfif, or something like that to check which button was selected, but how can this be done in the form itself, before it is even submitted ?

[Dan_Bracuk]

You have to use javascript. If you don't know how, I recommend the book, Teach Yourself Javascript in 24 Hours. That's how I learned.

[Guest]

to elaborate on what Dan said...if you want to do it client side (i.e. not have to refresh the page), you can use JavaScript.

if you want to do it using CF, you'd have to submit the form with each button click in order to have CF render the page properly. (this is not the method that i would recommend).

attaching a code sample that should get you started with the JS route.

[trojnfn]

Hi Charlie,

I took your code, modified it a bit, and it works great, just the way I wanted.

Is there anyway to change the color of the inputs that are disabled ? Right now, they are all white, and the tab skips over the disabled ones, but instead of tabbing over each input, I thougt a different color might me easier and more helpful.

thanks

[trojnfn]

Hi Charlie, one last thing.

Like I said, your code works great, I just changed the input type="button" to "radio" and it does the same thing.

Now I need to do the same thing, but this time with a pulldown, enabling and disabling the same fields based on the selection. Instead of using onClick, what would it be (I tried onselect but that did not work).

Thanks

[trojnfn]

Here is the code that I modifed to radio buttons, it works. Now how can I do the same thing by using drop downs ?

<script type="text/javascript">
function enableFields(fieldList) {
var fieldArray = fieldList.split(',');

// disable all fields
for (var i=1; i<=15; i++) {
document.getElementById('input' + i).value = ""; // clear out the value first (optional)
document.getElementById('input' + i).disabled = true;
document.getElementById('input' + i).style.backgroundColor="gray";
}

// enable the fields passed to the function
for (var i=0; i<fieldArray.length; i++) {
document.getElementById('input' + fieldArray ).disabled = false;
document.getElementById('input' + fieldArray).style.backgroundColor="white";
}
}
</script>


<input type="radio" name="request_type" value="Receiving Expedite" onclick="enableFields('1,2,3,4,5,6,7,8');" />Receiving Expedite<br />
<input type="radio" name="request_type" value="Attention To/Non PO Expedite" onclick="enableFields('4,8,9,12');" />Attention To/Non PO Expedite<br />
<input type="radio" name="request_type" value="CPR Expedite" onclick="enableFields('8,10,11,13');" />CPR Expedite<br />
<input type="radio" name="request_type" value="Kit Pull Expedite" onclick="enableFields('8,13,14,15');" />Kit Pull Expedite<br />
<input type="radio" name="request_type" value="Close To Inventory Expedite" onclick="enableFields('1,2,7,8,13');" />Close To Inventory Expedite<br />
<input type="radio" name="request_type" value="B/O Cashing Request" onclick="enableFields('2,8,13');" />B/O Cashing Request<br />
<input type="radio" name="request_type" value="Request For Physical Stock Check" onclick="enableFields('2,8,13');" />Request For Physical Stock Check<br />
</td>
</tr>

<tr>
<td valign="top" colspan="2">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr>
<td colspan="4" valign="top"><font size="4">
Please fill out as much information as possible. </font></td>
</tr>
<tr>
<td>PO Number:</td><td><input type="text" id="input1" name="po_number" disabled="true" /><br /></td>
<td>Attention To Name :</td><td><input type="text" id="input9" name="attention_to_name" disabled="true" /></td>
</tr>

[Guest]

i think this is a browser idiosyncracy. in FF they should be greyed out.

you can try applying a style via JS... you'd set document.getElementById(theID).style.backgroundColor = "#cccccc;" for disabled and set back to #ffffff for enabled.

[trojnfn]

Thanks for your help, Charlie,

Your code works great !

[Guest]

don't have time to write a full explanation...on my way out the door. can get you started tho...

use the onchange event in the <select>

the selected element is referenced through a combination of the options in the select (which, to JS is an array) and a property called selectedIndex.

so to determine the value of the selected element, it's

document.getElementById(elementID).options[document.getElementById(elementID).selectedIndex].value

it's a little arcane, but i can break it down later if need be 🙂

[trojnfn]

Thanks Charlie

When you get a chance, can you indeed break it down further ? I do not know javascript and your last code was a little easier to follow than this one, which totally confuses me.

Will this code do exactly what the radio buttons do, pull down to a selected option, then the fields that do not correspond are disabled and grayed out ?

Thanks again for your help.

[trojnfn]

Charlie,

Applying onChange to the select, I assume I would be using your defined function enableFields(fieldList). But how would it know which fields to enable and disable, if each corresponds to a different select option ?

[Guest]

depends. would multiple fields be enabled/disabled based on a specific (single) selected option? if so, just use the option value. otherwise, things get more complicated and you'll probably need an array to map the multiple fields that are tied to a single option.

[trojnfn]

Yes, multiple fields would be enabled/disabled base on a single select.

With the original code you provided, I changed it to radio buttons, and the first button selected only enables fields 1-8 and all the others are disabled and grayed out. It works great.

With the pulldown, I need to do the exact same thing. When the first one is selected, then only fields 1-8 are enabled and the rest disabled and grayed out.

Since I do not know javascript, I am having a hard time trying to grasp the concept. Can you provide me with some quick javascript code to get me started ?

Thanks

[Guest]

is that the extent of the business logic as it relates to the <select>? if the first option is selected, then fields 1-8 are enabled (and all others disabled), but if any other option is selected, then 1-8 are disabled (and all others enabled)?

[trojnfn]

Yes, that is correct.

Here is the code you provided, that I modified for radio buttons.

<input type="radio" name="request_type" value="Receiving Expedite" onclick="enableFields('1,2,3,4,5,6,7,8');" />Receiving Expedite<br />
<input type="radio" name="request_type" value="Attention To/Non PO Expedite" onclick="enableFields('4,8,9,12');" />Attention To/Non PO Expedite<br />
<input type="radio" name="request_type" value="CPR Expedite" onclick="enableFields('8,10,11,13');" />CPR Expedite<br />
<input type="radio" name="request_type" value="Kit Pull Expedite" onclick="enableFields('8,13,14,15');" />Kit Pull Expedite<br />
<input type="radio" name="request_type" value="Close To Inventory Expedite" onclick="enableFields('1,2,7,8,13');" />Close To Inventory Expedite<br />
<input type="radio" name="request_type" value="B/O Cashing Request" onclick="enableFields('2,8,13');" />B/O Cashing Request<br />
<input type="radio" name="request_type" value="Request For Physical Stock Check" onclick="enableFields('2,8,13');" />Request For Physical Stock Check<br />

So instead of using radio buttons, I need to do the exact same thing with the pulldown.

So if he first option selected from the pulldown should enable fields 1-8 and disable and gray out all the others. If the second option iis selected, then only fields 4,8,9 and 12 are enabled and the rest disabled and grayed out, etc.

If the pulldowns using the same method will not work, then I will just revert to the radio buttons again.

Thanks

[Guest]

if the values of the <options> can be the comma delimited list of fields to enable/disable, then you can use the same function.

otherwise, the <select> would require a new function that would have a conditional to key off of the selected option.

[trojnfn]

Here is my code for the pulldown, so it is not comma delimited.

<select name="request_type">
<option value="0">Scroll Down to Select Request Type       </option>
<option value="Receiving Expedite">Receiving Expedite</option>
<option value="Attention To/Non PO Expedite">Attention To/Non Po Expedite</option>
<option value="CPR Expedite">CPR Expedite</option>
<option value="KIT Pull Expedite">KIT Pull Expedite</option>
<option value="Close To Inventory Expedite">Close To Inventory Expedite</option>
<option value="B/O Cashing Request">B/O Cashing Request</option>
<option value="Request For Physical Stock Check">Request For Physical Stock Check</option>
</select>

Can this be easliy done with the original code you provided (with a few tweaks) or should I just stay with the radio buttons ?

[Guest · Accepted solution]

that's not my call to make...but the fact is that using the <select> will require a different function than what you've got now.

here's what you'd use for the select:

[trojnfn]

Thanks Charlie,

Once again, you are a genius. I used your code, with a few minor adjustments, and it works great, does everything that I wanted it to do. And yes, I did notice the loop and changed it from 5 to 15, which is the number of fields that I have.

Thanks again for all your help, I really appreciate it.

[Guest]

btw...that first loop in the JS (the one that loops from 1 to 5 disabling all form field) assumes that there is only input1 - input5 text inputs (and that they all follow the naming convention input"n").

if you have more than 5, you'll need to change that loop. if the text inputs are NOT consistently named input1 - input"n", this script doesn't work.