Results 1 to 2 of 2

Thread: blinding/blocking/gray select forms

  1. #1
    Join Date
    Sep 2007
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question blinding/blocking/gray select forms

    imagen you got a 1 select box(place)
    and underneath 5 other select boxes(day/month/year/hour/minute)
    as default those 5 select boxes are blind...blind this means that somehow they got gray colored...i am not sure how to decribe it but that is not just that you can't touch those fields they kind of gray scaled...
    and only 2 options from the first select list can bring those 5 select boxes to life...that means that the blind\gray will disappear and user will be able to select them...






    this code doing the same but with checkbox...if the box is checked it enables the 5 selects...
    i need to use anoter select box that only 2 of it's options will enable the other 5 select boxes
    Code:
    <script type="text/javascript">
    function enableDisable(oChk){
    var disable = !oChk.checked;
    var arglen = arguments.length;
    var obj, startIndex = 1;
    var frm = oChk.form;
    for (var i=startIndex;i<arglen;i++){
    obj = frm.elements[arguments[i]];
    if (typeof obj=="object"){
    if (document.layers) {
    if (disable){
    obj.onfocus=new Function("this.blur()");
    if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
    }
    else {
    obj.onfocus=new Function("return");
    if (obj.type=="text") obj.onchange=new Function("return");
    }
    }
    else obj.disabled=disable;
    }
    }
    }
    </script>
    </head>
    <body>
    <form name="example1">
    Enable/Disable Fields: <input type="checkbox" name="control1" onclick="enableDisable(this,'day','month','year','hour','min')" />
    <br />
    
    
    day <select name="day" disabled="disabled" />
    <option>option1</option>
    </select>
    
    
    month <select name="month" disabled="disabled" />
    <option>option1</option>
    </select>
    
    year <select name="year" disabled="disabled" />
    <option>option1</option>
    </select>
    
    
    hour <select name="hour" disabled="disabled" />
    <option>option1</option>
    </select>
    
    
    min <select name="min" disabled="disabled" />
    <option>option1</option>
    </select>
    </form>
    Last edited by hantz; 11-13-2007 at 09:43 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function enableDisable(oSel, n1, n2){
    var disable = oSel.options.selectedIndex!=n1&&oSel.options.selectedIndex!=n2;
    var arglen = arguments.length;
    var obj, startIndex = 3;
    var frm = oSel.form;
    for (var i=startIndex;i<arglen;i++){
    obj = frm.elements[arguments[i]];
    if (typeof obj=="object"){
    if (document.layers) {
    if (disable){
    obj.onfocus=new Function("this.blur()");
    if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
    }
    else {
    obj.onfocus=new Function("return");
    if (obj.type=="text") obj.onchange=new Function("return");
    }
    }
    else obj.disabled=disable;
    }
    }
    }
    </script>
    </head>
    <body>
    <form action="#" name="example1">
    <div>
    <select name="control1" onchange="enableDisable(this, 1, 2, 'day','month','year','hour','min')">
    <option value="">No</option>
    <option value="">Yes</option>
    <option value="">Maybe</option>
    <option value="">Absolutely Not!</option>
    </select>
    <br>
    <input disabled type="text" name="day">
    <input disabled type="text" name="month">
    <input disabled type="text" name="year">
    <input disabled type="text" name="hour">
    <input disabled type="text" name="min">
    </div>
    </form>
    </body>
    </html>
    Notes: If you change the position of the 'acceptable' selections (currently 'Yes' and 'Maybe'), a little bit of configuration is required here:

    Code:
    <select name="control1" onchange="enableDisable(this, 1, 2, 'day','month','year','hour','min')">
    Their position in the select is represented 0 (which is 'No', in this example) to whatever, make sure the two numbers in red in the above correspond to their actual positions.
    Last edited by jscheuer1; 11-13-2007 at 01:43 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •