how to set select element as readonly disabled doesnt pass select value on server

Question

When i used any of the following code  select element do looks like disabled but the select is not pass on the server   Im thinking of the readonly to be used  but i dont know or is that will solved the issue  Any help is much appreciated       selectID   prop  disabled  true        selectID   prop  disabled   disabled         selectID   attr  disabled  true        selectID   attr  disabled   disabled

User · Answer

see this answer - HTML form readonly SELECT tag/input

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 it's value to the hidden input in an onchange event.

see this fiddle to demnstrate how to extract the selected value in a disabled select into a hidden field that will be submitted in the form.

<select disabled="disabled" id="sel_test">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<input type="hidden" id="hdn_test" />
<div id="output"></div>

$(function(){
    var select_val = $('#sel_test option:selected').val();
    $('#hdn_test').val(select_val);
    $('#output').text('Selected value is: ' + select_val);
});

hope that helps.

User · Answer

You can simulate a readonly select box using the CSS pointer-events property   select readonly        pointer-events  none      The HTML tabindex property will also prevent it from being selected by keyboard tabbing    lt select tabindex  -1  gt     x000D   x000D  select readonly  x000D    x000D      pointer-events  none  x000D    x000D   x000D   x000D     irrelevent styling    x000D   x000D    x000D    x000D    box-sizing  border-box  x000D    x000D   x000D    readonly  x000D    x000D    background   fafafa  x000D    border  1px solid  ccc  x000D    color   555  x000D    x000D   x000D  input  select x000D    x000D    display block  x000D    width  20rem  x000D    padding  0 5rem  x000D    margin-bottom  1rem  x000D    x000D   lt form gt  x000D     lt input type  text  value  this is a normal text box  gt  x000D     lt input type  text  readonly value  this is a readonly text box  gt  x000D     lt select readonly tabindex  -1  gt  x000D       lt option gt This is a readonly select box lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D     lt  select gt  x000D     lt select gt  x000D       lt option gt This is a normal select box lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D     lt  select gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

To be able to pass the select  I just set it back to          selectID   prop  disabled  false     or        selectID   attr  disabled  false     when passing the request

User · Answer

without disabling the selected value on submitting        selectID option not  selected    prop  disabled   true    If you use Jquery version lesser than 1 7     selectID option not  selected    attr  disabled   true     It works for me

User · Answer

To simplify things here s a jQuery plugin that can achieve this goal   https   github com haggen readonly   Include readonly js in your project   also needs jquery  Replace  attr  readonly    readonly   with  readonly   instead  That s it         For example  change from     someClass   attr  readonly    readonly            to     someClass   readonly

[javascript] how to set select element as readonly ('disabled' doesnt pass select value on server)

Examples related to javascript

Examples related to jquery

Examples related to select

Examples related to readonly