Javascript Disabling dropdown box

  1. Nyshadh

    How do i disable a html dropdown box. When i say disable, it should be blurred. I should be able to enable it again. How to do this both Netscape and IE.

    Appreciate any help
    Thanks

    Posted: 2001-08-22 16:06:59 #

  2. jason

    If you want to do it statically you need to use
    <SELECT ONFOCUS="this.blur()" ...>
    for NN3/4 which don't support the HTML 4.0 DISABLED attribute and you
    can use
    <SELECT DISABLED ...>
    for IE4+ and NN6.
    To use both together:
    <SELECT DISABLED
    ONFOCUS="if (!document.all && !document.getElementById)
    this.blur();"
    >

    If you want to dynamically disable/enable a SELECT use

    <HTML>
    <HEAD>
    <SCRIPT>
    function skip () { this.blur(); }
    function toggleSelect (select) {
    if (!select.disabled) {
    select.disabled = true;
    if (!document.all && !document.getElementById) {
    select.oldOnFocus =
    select.onfocus ? select.onfocus : null;
    select.onfocus = skip;
    }
    }
    else {
    select.disabled = false;
    if (!document.all && !document.getElementById) {
    select.onfocus = select.oldOnFocus;
    }
    }
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM NAME="formName">
    <SELECT NAME="aSelect">
    <OPTION>Kibology
    <OPTION>Xibology
    </SELECT>
    <INPUT TYPE="button" VALUE="toggle select"
    ONCLICK="toggleSelect(this.form.aSelect);"
    >
    </FORM>
    </BODY>
    </HTML>

    Posted: 2001-08-23 16:07:11 #

  3. Tim

    Hi,

    I found the following snippet of code really useful and it works fine. However, I don't understand all the code. The following are the elements of code that I don't understand:
    -if (!document.all && !document.getElementById)
    I have a javascript 1.2 reference but nowhere does it say that "document" has properties "all" or "getElementById". Could you explain where these properties "come from" and to what purpose they are being used here.
    - select.oldOnFocus = select.onfocus ? select.onfocus : null;
    Again where are these properties coming from? The only bit I recognize here is "onfocus" which I always thought of as an event type not a property of boolean type that can fork a ternary expression.

    Any help in shoring up what is obviously my limited knowledge of javascript is greatly appreciated.

    <HTML>
    <HEAD>
    <SCRIPT>
    function skip () { this.blur(); }
    function toggleSelect (select) {
    if (!select.disabled) {
    select.disabled = true;
    if (!document.all && !document.getElementById) {
    select.oldOnFocus =
    select.onfocus ? select.onfocus : null;
    select.onfocus = skip;
    }
    }
    else {
    select.disabled = false;
    if (!document.all && !document.getElementById) {
    select.onfocus = select.oldOnFocus;
    }
    }
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM NAME="formName">
    <SELECT NAME="aSelect">
    <OPTION>Kibology
    <OPTION>Xibology
    </SELECT>
    <INPUT TYPE="button" VALUE="toggle select"
    ONCLICK="toggleSelect(this.form.aSelect);"
    >
    </FORM>
    </BODY>
    </HTML>

    There are no replies to this message.

    Reply to this message

    Back to Discussion Forum

    Posted: 2001-10-10 15:57:38 #

  4. Mike

    Great!
    But do you know how I can disable a dropdown (ie. stop a user changing its value) but still SUBMIT the value ?

    Posted: 2002-01-07 17:28:04 #

  5. Julian Wagstaff

    Mike - did you ever figure this one out? I am trying (and failing) to do the same thing!

    Posted: 2003-12-01 17:34:08.768206 #

  6. bb

    Not foolproof, but instead of disabling, you could use onFocus='body.focus()'

    Posted: 2006-06-16 02:06:21.349470 #

:
: