Take the 2-minute tour ×

I have an HTML input field that I want the user to be able to see, but not edit. If I mark the field as 'disabled', it doesn't get submitted along with the rest of the form. If I mark it as 'readonly', it behaves like what I want, but still looks enabled (at least on Chrome).

Basically, I want the input field to look like a disabled field, but behave as a readonly field. Is this possible?


edit: Also, if I mark it as 'readonly', it's still possible to change its value by double clicking it, and selecting something that was previously there.

share|improve this question

3 Answers 3

up vote 7 down vote accepted

Here is workaround: You have input disabled where you want ( just for displaying value ) and have a hidden input with name and value you need.

share|improve this answer
Note though, that this doesn't prevent tampering with the form. This is all just looks. So see this question for protection against tampering. –  Chris Wesseling Oct 12 '11 at 16:26
works great, thanks! –  numegil Oct 12 '11 at 16:44

I had a similar issue with JSF in which a hidden field worked for persisting the value I needed, but the value in a readonly or disabled input field would get cleared if validation of the form failed upon submission. I found an alternate solution that seems to work rather elegantly by leaving the input field technically editable, but which prevents editing by doing a blur as soon as it receives focus. While you may not have the same issue with your server-side environment that I did with JSF (which doesn't submit values even from input fields marked merely readonly), you might be able to use the same technique in your situation, with the upshot being that you then don't need a separate hidden field to persist the value. Like the second answer, however, it doesn't address the issue of making the field look disabled, at least not without some additional CSS code.

The code in JSF:

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" />

which becomes the following HTML:

<input id="entid" type="text" value="10003" onfocus="blur();" />

You can see more on it here: How to persist JSF view parameters through validation

share|improve this answer

You could use css to make it look however you want, although this may not match other disabled fields cross browser/platform.

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>
share|improve this answer
That can be accomplished by styling all form elements. –  Chris Wesseling Oct 12 '11 at 16:30
I've added an example for you... –  neurotik Oct 12 '11 at 16:34
@CharString, that's true. –  neurotik Oct 12 '11 at 16:34

Your Answer


