How can I get the form value from a disabled <input> element

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.



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"/>

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:

  1. Unset disabled
  2. Set readonly
  3. Submit!

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">

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.


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 :)


Its Simple only two steps

  1. check if the input you want to access is disabled if it is then remove its "disabled" attribute

  2. Get the value and then add the disabled attribute again.


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?


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>

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


this will send your field value in form submit.


You can easily

  1. Change status to normal (disabled=false)
  2. Read Value
  3. reset input status to disabled

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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.