This is what I found by Firebug in Firefox.
Is it the same in other browsers?
If so, what's the reason for this?
This question is related to
form-submit
disabled-input
forms
http-post
disabled
input will not submit data.
Use the readonly
attribute:
<input type="text" readonly />
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 and should not be submitted.
select controls are still clickable even on readonly attrib
if you want to still disable the control but you want its value posted. You might consider creating a hidden field. with the same value as your control.
then create a jquery, on select change
$('#your_select_id').change(function () {
$('#your_hidden_selectid').val($('#your_select_id').val());
});
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)
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.
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
.
Source: Stackoverflow.com