How can I get the form value from a disabled element

Question

The HTML standard for forms appears to be such that disabled input elements do not contribute to the form name/value collection.

Is there ANY way to get around this? I need to be able to toggle disable on and off but still return whatever the value is when the form is submitted.

I realize that I can use JavaScript to copy the value to a hidden input before the form is submitted, but I would prefer not to. Is there a cleaner way?

I'm using ASP.NET, not that that matters.

score 114 · Answer 1 · edited Mar 01 '17 at 23:17

114

You should use the readOnly flag rather than disabled. Read-only fields cannot be edited by the user, but are still submitted with the form.

<input type="text" value="blah" readonly="true"/>

edited Mar 01 '17 at 23:17

JosephGarrone

4,081
3
38
61

answered Mar 24 '09 at 21:47

levik

114,835
27
73
90

1

readOnly did'nt work for checkboxes. How do i get value of disabled checkbox? – Zohaib Dec 07 '13 at 11:17
It's a standalone attribute, the value true is unnecessary: would do as well (and is the html standard way). – ling Sep 27 '15 at 02:45
@ling that is called shortcut, it is not allowed in xhtml – Aderemi Dayo Jan 19 '19 at 08:29
3

Per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly this only works for text inputs, not other controls – Jonathan Berger May 24 '19 at 19:17

score 24 · Answer 2 · answered Feb 07 '09 at 18:03

24

The HTML standard for forms appears to be such that disabled input elements do not contribute to the form name/value collection.

That is correct.

HACK: You could use Javascript to, upon submit:

Unset disabled
Set readonly
Submit!

answered Feb 07 '09 at 18:03

Wayne

1,288
1
7
20

Brilliant, thanks. If I have to use Javascript, I'd prefer not to copy values around. This works in IE and FF at least. I'm still testing cross browser, but I'll give you the answer flag for now. – Feb 07 '09 at 18:07
You could also use JavaScript to, on submit, add hidden input fields to the form for all the disabled elements and copy their values. – Miles Mar 24 '09 at 22:15

kennebec · Answer 3 · 2009-03-24T21:56:48.453

If you make the value readonly, instead of disabling it, the field's name/value will be sent with the rest of the non-disabled fields.

Make the readonly fields' focus event handler pass the focus to the next eligible field, to make it act more like a disabled element. Some browsers let you focus and select readonly fields, and some even let you paste into a readonly field, though they revert to the original value onblur and onchange.

<input type="text" value="" readonly="readonly">

score 8 · Answer 4 · answered Feb 08 '09 at 00:19

As a slightly more robust variant of Wayne's hack (which might get confused by a Back button push), when disabling a control: set readonly= true and className= 'disabled' instead of disabled= true, then style .disabled to look similar to a disabled field.

Josh Mc · Answer 5 · 2013-06-09T21:52:15.047

2

I whipped up a quick (Jquery only) plugin, that saves the value in a data field while an input is disabled. This just means as long as the field is being disabled programmaticly through jquery using .prop() or .attr()... then accessing the value by .val(), .serialize() or .serializeArra() will always return the value even if disabled :)

https://github.com/Jezternz/jq-disabled-inputs

edited Jun 09 '13 at 21:52

answered Jun 08 '13 at 02:29

Josh Mc

9,911
8
53
66

score 1 · Answer 6 · answered May 21 '20 at 19:46

1

You can easily

Change status to normal (disabled=false)
Read Value

reset input status to disabled

$(element).prop("disabled", false); var text = $(element).val(); $(element).prop("disabled", true)

answered May 21 '20 at 19:46

Mehdi Saghari

154
1
9

score 0 · Answer 7 · answered Sep 06 '22 at 00:42

0

A little variant,set readonly flag and then with css add this to the input element

.read_only_input {
background: #efefef; /* to look like disabled */
pointer-events: none; /* to avoid focus on input */

}

answered Sep 06 '22 at 00:42

DR-MATTH

121
3
5

score -1 · Answer 8 · answered Sep 04 '14 at 10:29

-1

Its Simple only two steps

check if the input you want to access is disabled if it is then remove its "disabled" attribute
Get the value and then add the disabled attribute again.

answered Sep 04 '14 at 10:29

Mateen

1,631
1
23
27

score -1 · Answer 9 · answered Jan 11 '16 at 18:27

I suppose this is a hack, but seems to work well for me. Do both! User sees disabled input, clearly ghosted and browser prevents interaction - but it is not submitted with form. The user doesn't see the potentially disorienting readonly field, yet it is submitted with the form.

<input name="mode_d" size="8" value="mode" disabled>
<input name="mode"            value="mode" hidden readonly>

score -1 · Answer 10 · answered Feb 07 '09 at 18:02

-1

Can you use Visible=false and/or ReadOnly=true instead of Enabled=false?

If you are using the control, you shouldn't really set Enabled=false?

answered Feb 07 '09 at 18:02

Ian G

29,468
21
78
92

I'm not using the Enabled property that ASP.NET provides, just setting disabled "disabled" or not with JavaScript. Thanks for the contribution. – Feb 07 '09 at 18:11
Setting Visible=False means the control won't even render to the page. There would be nothing to even check for input. – womp Mar 24 '09 at 22:01

score -1 · Answer 11 · edited Mar 09 '18 at 09:47

-1

Instead of setting field as disable set readonly attribute to "readonly " like shown below.

readonly=readonly

this will send your field value in form submit.

edited Mar 09 '18 at 09:47

Liam

27,717
28
128
190

answered Jan 31 '12 at 10:26

Santosh Ganacharya

386
3
10

How can I get the form value from a disabled element

11 Answers11

Linked