Making an input non-editable without disabling

Question

I have a form which calculates a cost and sets the value of an input accordingly. For obvious reasons, I have used:

$('#totalcost').attr('disabled',true);

to prevent the user from being able to edit the cost.

However, when I do this, the PHP script I'm using to mail the form doesn't pick up the input (not just the value - it doesn't read the input at all). When the input is enabled, it works fine.

How can I prevent the user from editing the input while still having the PHP mailing the value? Or is there a better way to do this anyway?

The values of disabled form elements are not send – this is explicitly _specified_ this way. Use `readonly` instead. — CBroe, Nov 28 '13 at 12:56
Well better place an hidden field also , this might help http://stackoverflow.com/questions/6241943/how-can-i-make-an-input-field-read-only-but-still-have-it-send-data-back-to-a-fo — Deepanshu Goyal, Nov 28 '13 at 12:58
Then again, inputs can still be edited after pressing submit, an example tool would be the Firefox extension: `tamperdata` — Daryl Gill, Nov 28 '13 at 12:59

score 6 · Answer 1 · answered Nov 28 '13 at 12:56

6

Make it readonly, not disabled:

$("#totalcost").attr('readonly', true);

You could also do it in the original HTML, since it's not something you really want to change back and forth dynamically.

<input id="totalcost" type="text" readonly>

answered Nov 28 '13 at 12:56

Barmar

741,623
53
500
612

Worked like an absolute charm, thank you. Will accept when it lets me. – ElendilTheTall Nov 28 '13 at 13:00
@A.Wolff, From [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input) it is attribute – Murali Murugesan Nov 28 '13 at 13:02
@Murali ya but 'checked/disabled/etc...' are also attributes regarding MDN – A. Wolff Nov 28 '13 at 13:05
@A.Wolff, then what is the use of introducing prop() by jQuery? confused :( – Murali Murugesan Nov 28 '13 at 13:06
@A.Wolff The checked attribute specifies the initial, default state; the checked property is the current state of the UI. – Barmar Nov 28 '13 at 13:06

score 0 · Answer 2 · answered Nov 28 '13 at 12:57

0

Use Read Only property, Though i guess it wont work in internet exploer.

answered Nov 28 '13 at 12:57

sushil bharwani

29,685
30
94
128

score 0 · Answer 3 · answered Nov 28 '13 at 12:57

0

Add readonly attribute, like this:

$("#totalcost").attr('readonly', true);

answered Nov 28 '13 at 12:57

display-name-is-missing

4,424
5
28
41

score 0 · Answer 4 · answered Nov 28 '13 at 12:57

0

Add property readonly="true".

$('#totalcost').attr('readonly',true);

answered Nov 28 '13 at 12:57

Tom Chung

1,412
9
12

score 0 · Answer 5 · answered Nov 28 '13 at 12:59

0

you can try:

$("#totalcost").prop("readonly",true);

answered Nov 28 '13 at 12:59

JosephC

166
1
7

score 0 · Answer 6 · answered Nov 28 '13 at 13:03

0

Use read only in html itself or in script

<input type="text" name="totalcost" id="totalcost" value="" readonly>

$('#totalcost').attr("readonly", true);

answered Nov 28 '13 at 13:03

user3040610

750
4
15

Making an input non-editable without disabling

6 Answers6