Readonly listbox in html without disabling

Question

Please refer this link

Please help me to make this listbox readonly. Please do not use disable attribute as I need to post it later.

 <select size=4 multiple="multiple">
    <option selected=selected>Volvo</option>
    <option selected=selected>Saab</option>
    <option selected=selected>Mercedes</option>
    <option selected=selected>Audi</option>
  </select>

What do you mean by read only? Do you mean it should behave as though disabled, without using the disabled attribute? — tintyethan, May 15 '14 at 12:30
http://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input — Klemen Tusar, May 15 '14 at 12:30
If the data shouldn't be interacted with, don't make it a `select`. Just display it. If you need a static value posted with the form, use a `input type="hidden"` or include it in the action route for the form. (Note: Both of those options *do* allow a savvy user to change the value. If the user *must not* change the value then keep it server-side.) — David, May 15 '14 at 12:32

Luke · Answer 1 · 2014-05-16T14:10:18.797

1

Why don't you keep this disabled and add a <input type="hidden"> with the information you need to be posted?

Obviously this wasn't very clear so:

<script>

    var selectVal = $("#select_user > option[selected]").val();

    $("#select_post").val(selectVal);

</script>

<select disabled id="select_user">
    <option>Option 1</option>
    <option selected>Option 2</option>
    <option>Option 3</option>
</select>

<input type="hidden" name="select_post" id="select_post">

Now the user can see the select, but the value is replicated in the hidden input and then sent to the action file. Thankfully, since the select never changes, you don't have to do anything with .change()

edited May 16 '14 at 14:10

answered May 15 '14 at 12:28

Luke

3,985
1
20
35

I need to display these values to user – shrikanth May 15 '14 at 12:37
A disabled input is still readable... – Luke May 15 '14 at 14:34
I know that disabled != hidden but can we post disbaled one ?? – shrikanth May 16 '14 at 06:00
Edited the answer with example – Luke May 16 '14 at 14:10

score 0 · Answer 2 · answered May 15 '14 at 12:33

0

There is no readonly attribute available for the element and disabling the field was not an option since we needed the value on the serverside. Some simple javascript did the job:

You can try this script

<select size=4 multiple="multiple" onchange="this.selectedIndex = 1">
  <option selected="selected">Volvo</option>
  <option selected="selected">Saab</option>
  <option  selected="selected">Mercedes</option>
  <option  selected="selected">Audi</option>
</select>

This will only do the job if you meant that the user should be able to see all values in the list and not be able to select a new value.

Demo

answered May 15 '14 at 12:33

Dhaval Marthak

17,246
6
46
68

If you can downvote, then can comment too! aren't you? – Dhaval Marthak May 15 '14 at 12:37
Hey, it wasn't me .Infact i don't want to downvote any answer as, all are helping me!!.. Infact i voted just now . so now it is neutral. – shrikanth May 15 '14 at 12:40
@shrikanth I know, but my comment is for one who downvoted! – Dhaval Marthak May 15 '14 at 12:41
Thanks for your response .I wanted something like this... when the page gets loaded all values are selected and user should not be allowed to make any selection changes. But your demo default to index 1 as always – shrikanth May 15 '14 at 12:42

Neel · Answer 3 · 2014-05-15T12:47:19.300

0

   <select size=4 multiple="multiple" onchange="this.selectedIndex=this.defaultIndex;">
  <option selected="selected">Volvo</option>
  <option selected="selected" >Saab</option>
  <option  selected="selected" >Mercedes</option>
  <option  selected="selected" >Audi</option>
</select>

Demo :-

http://jsfiddle.net/2gmKY/2/

edited May 15 '14 at 12:47

answered May 15 '14 at 12:38

Neel

11,625
3
43
61

Sorry Neel. It allows user to make selection. Thank you – shrikanth May 15 '14 at 12:47
I have updated @shrikanth – Neel May 15 '14 at 12:47
Neel ,Thanks for helping me out.. I checked fiddle submitted by you. first time all listbox values are selected . however when user clickon any values it selects first value only. My requirement is when user clicks on any of these values,original selected values shouldn't be changed .(meaning it should select all values as before) – shrikanth May 15 '14 at 12:59
sorry @shrikanth I am not getting you – Neel May 15 '14 at 13:04
Neel, Here is my observation. First time when the page gets loaded all the values are selected. When user clicks on any of these values , only first values gets selected. But I want to select all values as before – shrikanth May 15 '14 at 13:05

score 0 · Answer 4 · answered May 15 '14 at 12:45

As far as I know, readonly doesn't exist for select boxes.

As for best practice, if you don't need the data to be changed, you shouldn't make it a form element. If you only make it a form element in order to get a certain display, use CSS to make it LOOK like a form element.

Plus, if data shouldn't be changed, it's safer not to send it with a form. Javascript can be disabled easily.

CSS

ul.fake_select{
        list-style-type:none;
        color:#000000;
        overflow-y:scroll;
        width:100px;
        height:auto;  /* If you have lots of options, put a fixed value */
        padding:0;
}
ul.fake_select li{
        margin:0;
        background:#3399FF;
        color:#FFFFFF;
}

HTML

<ul class="fake_select">
    <li>Volvo</li>
    <li>Saab</li>
    <li>Mercedes</li>
    <li>Audo</li>
</ul>

Thanks for the help. I'm creating listbox runtime using html embedded with php.So it will be great if you modify my code as given before — shrikanth, May 15 '14 at 13:12
Sorry, I don't understand what you mean. Regardless of what language you use to output your html, it doesn't change the solution I gave you. — herezy, May 15 '14 at 13:24

Readonly listbox in html without disabling

4 Answers4

Demo