HTML form read only SELECT tag/input
Problems:
- form html - 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 read only attribute for a select tag, and still get the POST data?
Solution 1:
- html form action - 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 html form example :
$('#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;
}html form input :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id="mainform">
<select id="animal-select" disabled="true">
<option value="cat" selected>Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
</select>
<input type="hidden" name="animal" value="cat"/>
<button id="enableselect">Enable</button>
<select name="color">
<option value="blue" selected>Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>
<input type="submit"/>
</form>
</div>
<div id="formdata_container" style="display:none">
<div>Submitted data:</div>
<div id="formdata">
</div>
</div>Solution 2:
- We could also use this demo
- Disable all except the selected option
html code :
<select>
<option disabled="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>- This way the dropdown still works (and submits its value) but the user can not select another value.
Solutions 3:
This is one way for using Simple jQuery code
jQuery('select.readonly option:not(:selected)').attr('disabled',true);
Solution 4:
The another way of doing a readOnly attribute to a select element is by using css you can do the following:
Jquery code :
$('#selection').css('pointer-events','none');