According to HTML specs, the select
tag in HTML doesn't have a readonly
attribute, only a disabled
attribute. So if you want to keep the user from changing the dropdown, you have to use disabled
.
The only problem is that disabled HTML form inputs don't get included in the POST / GET data.
What's the best way to emulate the readonly
attribute for a select
tag, and still get the POST data?
Answer
You should keep the select
element disabled
but also add another hidden input
with the same name and value.
If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.
Here is a demo:
$('#mainform').submit(function() {
$('#formdata_container').show();
$('#formdata').html($(this).serialize());
return false;
});
$('#enableselect').click(function() {
$('#mainform input[name=animal]')
.attr("disabled", true);
$('#animal-select')
.attr('disabled', false)
.attr('name', 'animal');
$('#enableselect').hide();
return false;
});
#formdata_container {
padding: 10px;
}
No comments:
Post a Comment