How to make select option readonly+javascript
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. What's the best way to emulate the readonly attribute for a select tag, and still get the POST data?
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. This way the dropdown still works and submits its value but the user can not select another value.
This results in Select to be gray with nice "disable" cursor on hover and on select the list of options is "empty" so you can not change its value. Yet another more contemporary option no pun intended is to disable all the options of the select element other then the selected one.
Set the select disabled when you plan for it to be read-only and then remove the disabled attribute just before submitting the form. The code above disables all other options not selected while keeping the selected option enabled. Doing so the selected option will make it into the post-back data. In addition to disabling the options that should not be selectable i wanted to actually make them dissapear from the list, but still be able to enable them should i need to later:.
This finds all select elements with a readonly attribute, then finds all options inside those selects that are not selected, then it hides them and disables them. It is important to separate the jquery query in 2 for performance reasons, because jquery reads them from right to left, the code:. If you disable a form field, this won't be send when form is submitted. So if you need a readonly that works like disabled but sending values do this:. This is the simplest and best solution. You will set a readolny attr on your select, or anyother attr like data-readonly, and do the following.
One simple server-side approach is to remove all the options except the one that you want to be selected. Thus, in Zend Framework 1. Following on from Grant Wagners suggestion; here is a jQuery snippet that does it with handler functions instead of direct onXXX attributes:.
If you are using jquery validate, you can do the following below, I used the disabled attribute without a problem:.
Rather than the select itself, you could disable all of the options except for the currently selected option. This gives the appearance of a working drop-down, but only the option you want passed in is a valid selection. The style hides all the options and the groups when the select is in readonly state, so the user can not change his selection. What I found works great, with plain javascript ie: If the select dropdown is read-only since birth and does not need to change at all, perhaps you should use another control instead?
I was able to get this to work to create a readonly select options control using JavaScript.
I had to hide the select box and create a new hidden field. I've placed the code on my website for anyone to use as a reference. I managed it by hiding the select box and showing a span in its place with only informational value. On the event of disabling the.
is it possible to make
But remembering the value and then restoring it in the onchange event seems to handle that issue. Here's an attempt to use a custom jQuery function to achieve the functionality as mentioned here:. By posting your answer, you agree to the privacy policy and terms of service. Stack Overflow Questions Developer Jobs Documentation beta Tags Users. Sign up or log in to customize your list. Tour Start here for a quick overview of the site Help Center Detailed answers to any questions you might have Meta Discuss the workings and policies of this site About Us Learn more about Stack Overflow the company Business Learn more about hiring developers or posting ads with us.
Log In Sign Up. Join the Stack Overflow Community. Stack Overflow is a community of 7. Join them; it only takes a minute: Adrien Be 8, 10 61 Anybody can create their own HTML page and make it RW. But it's not a PHP-specific question. I would suggest not using a select element at all in this case.
Is there any reason you can't just display the value as plain text? I'm not saying there's never a good use case for select or hidden form fields. The OP was having trouble displaying some text on the page, and I was simply wondering what the purpose was of using a select element in this case. I must be reading the wrong question. He says he wants to disable the select so the user doesn't change it. Maybe he needs to render the page with selects and use jquery to prevent changes.
But when he submits it back there is no data for it.
I was doing the same. I need to display selects that is filtered by other selects and the last drop down saves to DB via ajax so all the previous must be locked down. When I re render the page, yea, OK- I could display labels instead of selects.
But that is not the problem: Here is a demo: Ok, that works too. I had assumed since yo said that the hidden input should have the "same name" that the select had a name.
What if I'm using a multiple select? Also, only the selected value gets posted back not the entire list. So, your hidden sits before your select and holds the selected value. If the select gets disabled for "readonly", the post back will only contain the value of the hidden input. While this is the obvious solution, it sucks as a solution, since you have to add another input field. You can re-enable the select object on submit.
javascript - HTML form readonly SELECT tag/input - Stack Overflow
The attribute won't change the actual state. I think this solution is clever than bezmax solution. Because if we adding hidden input, we had to consider that only one of each inputs same name was enable in any time.
In otherwise, if both inputs was enabled, in server side, program will take array of input that can cause of exception for example if we didn't handle this situation, and we expect one string and use 'Request. T Nov 17 '15 at 5: Edited solution from attr to prop as suggested by Paris Char. Also, you have to have jquery in your belt This is much cleaner the accepted answer.
javascript - how to set select element as readonly ('disabled' doesnt pass select value on server) - Stack Overflow
Easier to undo the logic if you don't want the element disabled anymore and no extra input tags. We could also use this Disable all except the selected option: Vimal 1, 16 This should be the accepted answer. Expected behaviour without hacks! Perfect for a single-value SELECT tag!
Indeed, perfect answer for a single-value Select. The user will think the thing doesn't work This is confusing for the user because they can still select an option, but when they select it, the list changes back to the previously selected value. It is much more intuitive to disable the list to prevent the user from selecting anything at all. I had a similar problem and solved it only displaying the selected option. No JS required, less confusion for the user LukasEder For anyone leery about the respondent experience, they can add some CSS to really emphasize that the drop down should not be changed.
Set the cursor to not-allowed and the background-color to CCC. Simple jQuery solution jQuery 'select. Black Brick Software 3 2. Do we have to add a 'readonly' class to the select elements?
When do we have to call this code: Is your code noscript safe? No "readonly" class is required. Multiple select is problematic in that if there is more than one option already selected and so not disabled and a user selects one of the not disabled options, the other previously selected options become unselected.
It disables the options other than the selected one for select boxes with "readonly" class. If you have the select element in hand you can write: I like this solution. I would change the selector to select[readonly] so that you just add the readonly attribute to the element - this way you don't have to treat selects differently than any other type.
The javascript then progressively enhances the effect. Keep in mind that this solution and most of the others only helps the user agent provide the best user experience - it does not actually enforce anything that must be done server-side if needed.
Yaje 1, 9 But you can still change the value with keyboard. Yea this is pretty awesome. To change the value with keyboard you would have to TAB to the element and it becomes selected then. If you make the background colour grey or disabled, you are also visually informing the user this is "disabled" when its actually not disabled. Nobody supports IE any more so who cares. You can also put a keydown prevent default if you want to prevent.
If the select needs to be blocked from page render, This is really neat! Deosn't necessarily answer OP but excellent approach! If you have a CSRF validation like in symfony and many other frameworks , it won't work. Alessandro Vendruscolo 7, 1 23 Craig Ambrose 51 1 1. That sounds like a race condition waiting to happen. This is the best solution I have found: In addition to disabling the options that should not be selectable i wanted to actually make them dissapear from the list, but still be able to enable them should i need to later: It is important to separate the jquery query in 2 for performance reasons, because jquery reads them from right to left, the code: So if you need a readonly that works like disabled but sending values do this: After any change in readonly properties of an element.
Joaquim Perez 51 2. Guilherme Ferreira 6 David 2 Following on from Grant Wagners suggestion; here is a jQuery snippet that does it with handler functions instead of direct onXXX attributes: I resolved it with jquery: This worked very nicely, although the mouseover animation will still show a dropdown arrow that looks clickable.
This isn't working for me in Chrome But it still showing up the list when you double click it on IE. Anyway to prevent that? If you are using jquery validate, you can do the following below, I used the disabled attribute without a problem: Rafael Moni 1 5 Its work for me but pointer events will make cross browsers support?
ButtleButkus do the javascript ones work? I know that it is far too late, but it can be done with simple CSS: No JavaScript hacks needed. It's not readonly from the beginning. I use JavaScript to change and update. If a previous dropdown has a certain value, this one becomes readonly.
Then perhaps you can replace this dropdown with a textbox on-the-fly? Below worked for me: HoLyVieR 8, 3 33 Disabled form field won't be included in a submit. Mario Sannum 8, 8 27 Here's an attempt to use a custom jQuery function to achieve the functionality as mentioned here: Simply, remove the disabled attribute before submit the form. Wendell Carvalho 11 1. Sign up or log in StackExchange. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Stack Overflow works best with JavaScript enabled.
Don't rely on that for the server side. If you reenable the select you must also then disable or remove the hidden input after copying it's value as described of course. Demo share improve this answer. This is nice solution for readonly status of SELECT tag! The problem with this is that the dropdown is rendered as if it weren't readonly.
Please explain your code a bit. In theory a great idea - but there is NO support for disabled options in IE before IE8. MathOverflow Mathematics Cross Validated stats Theoretical Computer Science Physics Chemistry Biology Computer Science Philosophy more 3.
Meta Stack Exchange Stack Apps Area 51 Stack Overflow Talent.