17

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?

Thanks.

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.

numegil
  • 1,916
  • 7
  • 26
  • 38

5 Answers5

9

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.

simoncereska
  • 3,035
  • 17
  • 24
  • Note though, that this doesn't prevent tampering with the form. This is all just looks. So see [this question](http://stackoverflow.com/questions/324477/in-a-django-form-how-to-make-a-field-readonly-or-disabled-so-that-it-cannot-be) for protection against tampering. – Chris Wesseling Oct 12 '11 at 16:26
  • Not elegant - not your fault! - but possibly the only solution – Chris Pink Sep 15 '18 at 14:22
  • Unfortunately you end up with extra fields which causes issues (HDIV) – tad604 Jun 04 '19 at 02:05
6

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;"/>
neurotik
  • 1,390
  • 11
  • 15
4

I know this as been answered but wanted to give my CSS example.

Because when I was searching for a solution, how to style a input field so it looked like it was disabled, I always ended up with an input field looking like this.

enter image description here

With the border- left & top having a darker color etc. So a solved it using this CSS code.

input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

Made an jsfiddle so you guys can take a closer look.

It looks good on Chrome, on other browsers you need to modify the colors abit. Like in Firefox you need too change the color and Background-color to etc.

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);
Devl11
  • 220
  • 2
  • 10
4

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

Community
  • 1
  • 1
Kevin Rahe
  • 1,609
  • 3
  • 19
  • 27
0

I had the same problem, I want to disable a input box but I need to pass the value while submiting the form.

And the following css worked for me as expected,

pointer-events: none; background-color: #f1f1f2;

This makes the input box disabled and also passes the value while submitting the form.

Ivin Austan
  • 1