I occasionally find a need to make a form input control read only and required.
In the case below, I needed an input control that would act as a bucket for the Select1 controls value. The category and Sub Category controls are being generated dynamically , from arrays, and I needed the input control to hold the value on saving of the form.
In most cases, I would set this field as style.display='none' and make it invisible. But, in this case, I wanted the user to view the current sub category to ensure it was correct before submitting the form. You can imagine the havoc that would ensue if the user was able to change this value.
If you set the control to read only, and also have a need to validate the control, the validation will fail. It can't read the file.
So, I needed an alternative and this solution works pretty well. I call it the Poor Man's Read Only Control.
The first attempt worked well but, if I quickly slid my mouse, while trying to highlight the text, I could find a way to change a few of the characters.
To improve upon the method, I created a change to my CSS class called NormalTextBoxGray.
.NormalTextBoxGray {
color: #666666;
font-family: Verdana, Tahoma, Arial, Helvetica;
font-weight: normal;
font-size: 10px;
line-height: 11pt;
background-color: Whitesmoke;
cursor: not-allowed;
}
By changing the cursor to cursor: not-allowed; - I now have a workable solution and a read only control that accepts validation.
Happy coding and enjoy the experience,
Buck
|