How to add class when readonly attribute set 1

[FancyPrairie]

I have written a screen management system for web forms. As a result, there are a lot of things I don't know until runtime. For example, suppose the programmer wrote some code that sets the readonly attribute equal to true. I need a trigger of some sort that when that occurs a class is added to the element on which the readonly attribute was set. How would I do that?

 

[ChrisHirst]

Use the attribute selector in your style rules, no javascript required.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[FancyPrairie]

That's not what I'm looking for. I have a method where the programmer could set the readonly attribute. And the method would then add the appropriate class (i.e. myReadonlyClass). For example, MyFieldMgmtSystem.readonly(true). However, screen management systems should be as transparent to the programmer as possible. In this case the programmer would have to know about the javascript class "MyFieldMgtmSystem" and that it contained a method called readonly. Upon setting/clearing the readonly flag, the method would toggle the appropriate class on/off (i.e. myReadonlyClass). The javascript class is available to the programmer so that they can control the screen management system if they need to. In this case, most programmers would just set the readonly flag of the element as they normally would (i.e. myElement.readonly=true). In doing so, the class myReadonly would not be toggled on/off. I need some kind of trigger so when the readonly attribute is set/cleared, the triggered routine will toggle the class myReadonly on/off.

 

[1DMF]

What does the class do?

Chris is trying to explain you can assign CSS to elements that have a particular attribute, so E.G.

HTML

<input type="text" name="input1" value="this is big" readonly="readonly" />
<input type="text" name="input2" value="this isn't big" />

CSS

input[readonly] {
 font-size:3em;
}

But if you must use code, I do this with JQuery...

$('input').removeClass('myReadonlyClass');
$('input[readonly]').addClass('myReadonlyClass');

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[ChrisHirst]

I need some kind of trigger so when the readonly attribute is set/cleared, the triggered routine will toggle the class myReadonly on/off.

That IS what attribute selectors do,

input[readonly="true"] {
    border: 1px red dotted;
}

Will set all readonly input elements to have a red dotted border, 1px wide.





Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

ok, you should probably only grab those with the class...

$('input.myReadonlyClass').removeClass('myReadonlyClass');

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[FancyPrairie]

I understand that. I'll try to explain a little bit more of what I'm trying to do. A customer opens a web form and fills out an order. Upon submitting the order an email is sent to the department handling the order requests and an email is sent to the customer with a link to the web form. When the web form is opened it knows to populate the form with the information the customer had entered. However, at this point, the customer is not allowed to change anything on the form since it has already been submitted. Therefore, all fields are readonly. If a programmer or person in charge of handling the orders were to open the form with the customer information on it, the form would also be readonly. However, they have the option of selecting to edit the data. At that point all readonly fields would be set to false. But note that some fields on the form may be readonly by design. Therefore, when the edit button is selected the code needs to know which fields' readonly flag should be set to false and which ones are to be left to true. Consequently, I have 2 classes: ClassRO1 would be assigned to all fields that, by design, are readonly. When the user opens the confirmation form, I set the readonly flag for all fields. However, for those fields whose readonly flag was already been set, I assign the class ClassR01. To those that have not yet been set I assign the class ClassR02. Now, when the programmer opens the form or the person in charge opens the form and then hits the edit button, only those readonly fields whose class is set to ClassR02 are set to false. Because the others, by design should remain readonly.

So, if a programmer creates a form using my screen management system and programatically sets a field to readonly then the programmer must also remember to add the class ClassR01 otherwise, my screen management system may clear the readonly flag. Now the programmer could call my method to do it, which would add the class, which is fine. But, I want to make sure the class is added. So, if the programmer sets the readonly flag progammatically, I would like to trap that event so I can add the class.

 

[ChrisHirst]

You cannot do ANY of that simply with javascript.

javascript only affects the document for the one person who is viewing the document at that particular time, in that particular browser, once they close their browser the changes are gone, permanently.

If you want to affect the document for every viewer from that point on, you need to edit the source code on the server or set a flag in whatever database the data is stored in so whatever the 'management system" it is can set the class attribute accordingly.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

if the programmer sets the readonly flag progammatically, I would like to trap that event so I can add the class.

What event? How is this being done by the programmer?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[FancyPrairie]

It's a screen management system that handles processing populating the forms, updating records, splitting a form to show both the form view and grid view, handling input from the user. All the programmer has to do is call one routine and it handles everything. The only thing the programmer has to do is to design the form and add code to deal with the business rules. As such, within his/her code he/she may need to do stuff. For example, if the programmers code changes a value of a field, the screen management system needs to know that so it can do stuff, like displaying a dirty flag beside the field and display at the bottom of the form that the form has been modified. In addition, certain buttons need to be enabled so that the user can undo the changes they made to the field and/or form. There are several other things that need to be done also by the screen management system. For example, when the user selects the submit button, the record is saved, an optional email is sent to both the user and person handling request, clear all dirty flags etc. The user can now either exit the form or create another order. If new order, then the screen is cleared, default values are displayed on the form and some other stuff. The programmer did not have to code a thing to make all of that happen. The purpose of the screen management system is to handle all the mundane stuff. Again, all the programmer should have to do is design the layout of the form and write code to handle the business rules.

But, nevermind. I think I have a different solution to the problem. Instead of assigning ClassR01 to readonly fields that are set to true by design, I will just use a default readonly class (i.e. input[readonly]) as suggested). Then when the screen management system has to set all fields to readonly, I will simply use jquery to select all fields that are not readonly, add the class ClassR02 to those fields and then set the readonly flag to true. Then, when the user selects the edit button, all the screen management system has to do is to clear the readonly flag where the fields contains the class ClassR02. The readonly flag of the fields that are readonly by design are not touched.

 

[1DMF]

There is always another way ;-)

remember you can use the class selector in JQuery.

$('.ClassR02').prop('readonly',false);

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music