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

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:

<select tabindex="-1">

_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_

<form>_x000D_
  <input type="text" value="this is a normal text box">_x000D_
  <input type="text" readonly value="this is a readonly text box">_x000D_
  <select readonly tabindex="-1">_x000D_
    <option>This is a readonly select box</option>_x000D_
    <option>Option 2</option>_x000D_
  </select>_x000D_
  <select>_x000D_
    <option>This is a normal select box</option>_x000D_
    <option>Option 2</option>_x000D_
  </select>_x000D_
</form>

_x000D_

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

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    lt select disabled  disabled  id  sel test  gt       lt option value  1  gt One lt  option gt       lt option value  2  gt Two lt  option gt       lt option value  3  gt Three lt  option gt   lt  select gt    lt input type  hidden  id  hdn test    gt   lt div id  output  gt  lt  div gt     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

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

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