www.webdeveloper.com
Results 1 to 12 of 12

Thread: How to lock a combo-box.

  1. #1
    Join Date
    Apr 2011
    Posts
    5

    How to lock a combo-box.

    Hi all,
    I have a problem:
    In my page there are a combo-box and a check-box that should have the following behaviour:
    When check-box is checked, the combo-box has to take a precise value and has to be not editable by the user.
    I cannot use DISABLED option because the back-end needs the value in the combo and READONLY option is useless with a combo-box.... So I don't know what to use to make the combo "disabled"

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Lock(frm,sel,cb,index){
     if (frm[cb].checked){
      frm[sel].selectedIndex=index;
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    
    
    <select name="s1" size="1" onchange="Lock(this.form,'s1','tom',2);" >
     <option value="#">select 1</option>
     <option value="#">select 2</option>
     <option value="#">select 3</option>
     <option value="#">select 4</option>
    </select>
    
    <input type="checkbox" name="tom" onclick="Lock(this.form,'s1','tom',2);"/>
    </form>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    //another way
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset= "utf-8">
    <title>Small test  Page</title>
    <script>
    window.onload= function(){
        var lock= document.getElementsByName('lock_cbox')[0],
        sel= document.getElementsByName('select1')[0];
        sel.onchange= function(){
            if(lock.checked) sel.selectedIndex= +(lock.title);
            else lock.title=String(sel.selectedIndex);
        }
    }
    
    </script>
    </head>
    <body>
    <form action="">
    <select name="select1" size="1">
     <option value="1" selected>select 1</option>
     <option value="2">select 2</option>
     <option value="3">select 3</option>
     <option value="4">select 4</option>
    </select>
    <label>lock<input type="checkbox" name="lock_cbox" title="0"></label>
    </form>
    </body>
    </html>
    Last edited by mrhoo; 04-04-2011 at 03:33 PM.

  4. #4
    Join Date
    Apr 2011
    Posts
    5
    Hi, thank you.

    I have a doubt about your solutions:
    Your functions are called when "onChange" event happened on the combo-box, right?
    So that the combo isn't really locked but the user can open it, view the option, than select a new option and only when the combo is closed and the new value is different from the old one, the funcion is performed.
    I need something that makes the combo locked, so that the user can't open it (as it is disabled) and view other options.

    Thank you.

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Lock(frm,sel,cb,index){
     sel=frm[sel];
     var opts=sel.options,z0=0,z1=0,z2=0;
     if (!sel.save){
      sel.save=[];
      for (;z0<opts.length;z0++){
       sel.save.push(opts[z0]);
      }
     }
     opts=sel.save;
     for (;z1<opts.length;z1++){
      sel.appendChild(opts[z1]);
     }
     if (frm[cb].checked){
      for (;z2<opts.length;z2++){
       if (z2!=index){
        sel.removeChild(opts[z2]);
       }
      }
     }
     sel.selectedIndex=0;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    
    
    <select name="s1" size="1" onchange="Lock(this.form,'s1','tom',2);" >
     <option value="#">select 1</option>
     <option value="#">select 2</option>
     <option value="#">select 3</option>
     <option value="#">select 4</option>
    </select>
    
    <input type="checkbox" name="tom" onclick="Lock(this.form,'s1','tom',2);"/>
    </form>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    to correct an oversight

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Lock(frm,sel,cb,index){
     sel=frm[sel];
     var opts=sel.options,selected=sel.selectedIndex,z0=0,z1=0,ck=frm[cb].checked,z2=0;
     if (!sel.save){
      sel.save=[];
      for (;z0<opts.length;z0++){
       sel.save.push(opts[z0]);
      }
     }
     opts=sel.save;
     for (;z1<opts.length;z1++){
      sel.appendChild(opts[z1]);
     }
     if (ck){
      for (;z2<opts.length;z2++){
       if (z2!=index){
        sel.removeChild(opts[z2]);
       }
      }
     }
     sel.selectedIndex=ck?0:selected;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    
    
    <select name="s1" size="1" onchange="Lock(this.form,'s1','tom',2);" >
     <option value="#">select 1</option>
     <option value="#">select 2</option>
     <option value="#">select 3</option>
     <option value="#">select 4</option>
    </select>
    
    <input type="checkbox" name="tom" onclick="Lock(this.form,'s1','tom',2);"/>
    </form>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Feb 2006
    Posts
    2,927
    Disable the select when the checkbox is checked and enable it in an onsubmit handler.

  8. #8
    Join Date
    Apr 2011
    Posts
    5
    @vwphillips:
    WOOOOOW!
    Now it works! You're genius!!
    But I have a last problem: Why does the the combo's width decrease every time I click on the checkbox (If I click too many times, the combo comes to vanish!)?
    How can I prevent this behaviour?
    Thank you very much!


    @mrhoo: I cannot use ".disabled" option because in this case there is no trace of the value taken by the combo... it is like the combo doesn't exist in the page, so that the value sent to the back-end (host mainframe) is blank for that field.
    Last edited by ise; 04-06-2011 at 07:52 AM.

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    I can not see any indication that the select width decreases to less than the largest option width.

    To retain a constent width set the style width to the required width.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. #10
    Join Date
    Apr 2011
    Posts
    5
    Quote Originally Posted by vwphillips View Post
    I can not see any indication that the select width decreases to less than the largest option width.

    To retain a constent width set the style width to the required width.
    Yes, I're right but the strange thing is that if I resize the browser window, the combo's width returns to nomal size... If I display the style witdh it is always 100%, even if it clearly becomes smaller.

  11. #11
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    post a link to the page
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  12. #12
    Join Date
    Apr 2011
    Posts
    5
    It is on an intranet so you could not reach it

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles