This is what I found by Firebug in Firefox.
Values of disabled inputs will not be submitted
Is it the same in other browsers?
If so, what's the reason for this?
They don't get submitted, because that's what it says in the W3C specification. Controls that are disabled cannot be successful.
The disabled attribute is a boolean attribute. When present, it specifies that the <input> element should be disabled. A disabled input element is unusable and un-clickable.
disabled
input will not submit data.
Use the readonly
attribute:
<input type="text" readonly />
Source here
You can use three things to mimic disabled:
HTML: readonly
attribute (so that the value present in input can be used on form submission. Also the user can't change the input value)
CSS: 'pointer-events':'none'
(blocking the user from clicking the input)
HTML: tabindex="-1"
(blocking the user to navigate to the input from the keyboard)
Yes, all browsers should not submit the disabled inputs, as they are read-only.
More information (section 17.12.1)
Attribute definitions
disabled [CI] When set for a form control, this Boolean attribute disables the control for user input. When set, the disabled attribute has the following effects on an element:
- Disabled controls do not receive focus.
- Disabled controls are skipped in tabbing navigation.
- Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.
This attribute is inherited but local declarations override the inherited value.
How disabled elements are rendered depends on the user agent. For example, some user agents "gray out" disabled menu items, button labels, etc.
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Note. The only way to modify dynamically the value of the disabled attribute is through a script.
They don't get submitted, because that's what it says in the W3C specification.
17.13.2 Successful controls
A successful control is "valid" for submission. [snip]
- Controls that are disabled cannot be successful.
In other words, the specification says that controls that are disabled are considered invalid for submission.
There are two attributes, namely readonly
and disabled
, that can make a semi-read-only input. But there is a tiny difference between them.
<input type="text" readonly />
<input type="text" disabled />
readonly
attribute makes your input text disabled, and users are not able to change it anymore.disabled
attribute make your input-text disabled(unchangeable) but also cannot it be submitted.jQuery approach (1):
$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);
jQuery approach (2):
$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");
JavaScript approach:
document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;
PS disabled
and readonly
are standard html attributes. prop
introduced with jQuery 1.6
.
Disabled
controls cannot be successful, and a successful control is "valid" for submission.
This is the reason why disabled controls don't submit with the form.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With