Strange behavior using HTML 'readonly = "readonly" and JavaScript' element.readOnly = true; ''

Question

Some background

So, I have finished some improvements in a web application that does some automatic data interpolation. There are several text fields that the user fills, and other text fields between them have values ​​that are automatically calculated. Text fields that receive automatically calculated values ​​should be read only to prevent user changes, but cannot be disabled or they will not be sent after the postback. Each of these text fields also has a checkbox next to it, so that the user can consciously check it, to make the field writable, and thus allow them to override the interpolated value.

Browser: IE 7 (not sure how this behaves in others)

Problem

When setting the readOnly property of text fields with JavaScript, the value in the text field is sent with the form: I can see it on the server side (ASP.NET) using myTextBox.Text , and in Request.Form("myTextBox") .

If I set ReadOnly="true" to my <asp:TextBox /> element and don’t use the JavaScript method, the value in the text field is NOT accessible from myTextBox.Text (I suppose it never was made into a ViewState ), but it is sent with form: Request.Form("myTextBox") matters.

My question (s)

What's happening? Is it for design? Is this a problem with the browser? Did I find a mistake? It is annoying that I must have some additional JavaScript in order to initially disable the ability to write text fields when the page loads in order for my application to work.

Thanks!

Answer 1

This is by design. As an ASP.NET security feature, setting it to read only on the server will keep it in read mode no matter what happens on the client. If you want them to be able to override it and actually send the value, then it really is not only on the server, but only conditionally on the client. You can either do a postback when they checked to change the readonly attribute on the server, or set only the readonly attribute on the client using this ASP.NET code:

 MyControl.Attributes.Add("readOnly","readOnly") 

Answer 2

Well, I changed my pattern, and I think I see the problem - and I could be wrong, but I think that it behaves as intended.

When you set the ReadOnly field to codebehind, ASP:TextBox seems unchanged even by JS. I made the changes and the change was reflected in JS and on the form, but the TextBox kept the original value of the text - unless I looked in the request. Shape like you.

I do not think this is a mistake. I think it is intentional so that something is completely blocked - only server-side reading, freezing, seems like the preferred choice.

Can I suggest something using hidden input fields and spaces or ASP:Labels (which effectively render as spaces) to give a display aspect that is not user-controlled?

Alternatively, if you have access to the JS library (for example, jQuery), you can set the CSS class in your text blocks (using CssClass="readonly" or something in this tag), and then use the selection process. to set up an attribute, for example (assuming jQuery, easily written in other languages):

 $("input.readonly").attr("readonly","readonly"); 

This way you don’t rewrite most of your markup, and this is a quick JS solution.