Recently, i have encountered a problem, that is i need to “disable” some text boxes after it pre filled it’s data from server. As a normal developer i decided to use the “disabled” property of the text box like below:
<input type="text" id="txtName" disabled />
It works for me. Good! But my requirement expects some more functionalities. That is, whenever the value prefilled in the above text box, after the user clicks the “submit” button which inturn validate the value in client side and fire up the validation messages.
Here is what i stumbled! The problem arised! The “disable” property won’t allow you to edit. It will completely lock the control from edit. After that i come to know about the alternate property called “readonly”, which acts nearly like “disable” property, but one small exception you can fire the client side validations without any problem.
<input type="text" id="txtName" readonly />
So my learning here is, if you want to lock the control entirely you can go with “disabled” property. If you want to just lock the control and wants to enable the validations means you can go with “readonly”! The above points are opt only for “text boxes” alone!
Below list provides a detailed difference between these 2 properties:
| disabled | readonly |
| values not passed while submitting the form | values will be passed while submit the form |
| tabbing navigation not possible | allow tabbing navigation. |
| Unable to get focus. | Will get focus |
| Max. HTML controls support “disabled” property like <select>, <option> and <button>. | Not all form elements have readonly attribute suppor. |
Hope this helps!
0 comments :