HTML / Programming question for the propellerheads out there..
 

Tits!

I have a web page with a bunch of fields on it. The data in the fields are populated from a DB. The user can edit all of the fields except for one.

That field looks like this:

<input id="pC" name="pC" type="text"placeholder="Blah" class="form-control valid" maxlength="10" value="" disabled="disabled">

The problem is that this LOOKS like an editable field so users try to change the value. What I want to do is just display the data it contains in a plain-ol' format.

Any suggestions?

Could you use a span?

Demo: https://jsfiddle.net/q390kdLp/

That should just grey it out - I didn't test it, but I think that will work...

That would be the standard way of indicating a text field is not editable - You can see 'blablah'.....

https://jsfiddle.net/bwh0cnme/

I always forget about jsfiddle...

Change the css on the disabled selector. For example:

.form-control:disabled, .form-control[readonly]

You'll likely have a background colour attached to it - remove it.
Add in:
border: none;

Hi,

disabled fields should be greyed out automatically by most modern browsers, however you can simply add a css rule for the disabled input fields like

input:disabled {
background:#f0f0f0;
}

cheers,
z

If all you want is to display the data, get rid of the input field since the data does not change. Instead, style a text element (P, span, div, etc.) and place it in the proper position on your form.

Thank you! will try all ideas today.

Guys, RTFM.

use .form-control-plaintext

https://getbootstrap.com/docs/4.4/co...nly-plain-text

I'm not a fan of frameworks... especially not bootstrap :) the replies above are all general solutions and all of them will work.

He's already got bootstrap in his stack...

well then, fair enough :)

Yea, not really the biggest bootstrap fan myself, but if it's in his stack, which I suspect it is by the class names used on his input, it's best to not re-invent the wheel. :thumbsup

Bootstrap and javascript are not a solution. I can post a lot query using curl in command line.
Fix your pĥp script, this is the right way.

<input id="pC" name="pC" type="hidden" value="Blah" >Blah


:2 cents:

Thanks for the suggestions, but none of them did what I was looking for.

Here's a better description of the problem. I have form that people can access and modify as they need to. One of the form elements is a commission field, that they cannot edit.

It looks like this

https://2much.com/gfyimages/1.png

The code that displays it looks like this

<input id="Commission" name="Commission" type="text"
placeholder="Commission" class="form-control valid"
maxlength="10" value="" disabled="disabled">

Input for this field is already disabled and that's fine, it works, but it still LOOKS like a field that can be edited.

All I really want it to say is "Commission: 50%"

How do I simply show the value of "Commission" without making it an input field?

Nothin' ? Nada, zip ?

See my previous comment.

Contacted you on skype.

Great ideas already above!! :)