Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do you get the value of a disabled input field?

To submit the value of a disabled input field with HTML, we replace the disabled attribute with the readonly attribute. to set the readonly attribute to readonly . This way, the user won't be able to interact with the input, but the input value will still be submitted.

How do you ensure a select form field is submitted when it is disabled?

Instead of disabling the select , disable all of the option s and use CSS to gray out the select so it looks like its disabled. Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.

Do disabled inputs get submitted?

They don't get submitted, because that's what it says in the W3C specification. Controls that are disabled cannot be successful.


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

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


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)