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

Admin 1
Viewed 88651

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.

xhtml html javascript
11 Answers

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

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!
Wayne_Khan_110110

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

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.

user_189360

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

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

}

user_144099520

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?

inspite_317650
Related