www.webdeveloper.com
Results 1 to 7 of 7

Thread: Newbie. Need to disable select until user puts mark in check box. then enable select

  1. #1
    Join Date
    Sep 2003
    Posts
    8

    Question Newbie. Need to disable select until user puts mark in check box. then enable select

    Newbie. Need to disable select until user puts mark in check box. Then enable select

    Hi, I have two select box's on a page. The first asks what product, the second is based on the first and presents a list of pdf's according to which product the user selected. (yes, multi dimensional)

    What I have works fine, but now i need to make the user put a check mark in a check box before the First SELECT box becomes enabled/available.

    So basically, when they agree, they can get the download.

    Here are my select boxes.
    HTML Code:
    <form>
    <select name="category" style="width:180px"></select>
    <select name="site" style="width:180px" onchange="openLink(this.value)"></select>
    <input type="button" value="Open" onclick="openLink(this.form.site.value)">
    </form>
    (ignore the The 'open' button. It's there in case the default option is what the user wants, so they don't have reselect via the select box.)

    1. How do I disable the select boxes by default on page load?
    2. How do I detect that the user has put a tick in and the enable the disabled Select box??

    Many thanks in advance.

    Rob

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    you can disable an element using something like:

    Code:
     
    document.getElementById("your_elem_id").disabled = true;
    you also need an onclick event handler in the checkbox which runs a function which includes something lke:

    PHP Code:
    if(elem.checked)   {
       
    //enable the select list
       
    document.getElementById("your_elem_id").disabled false;
    } else {  
    //checkbox is not checked
       //disable the select list
        
    document.getElementById("your_elem_id").disabled true;

    Last edited by tirna; 06-26-2010 at 09:27 AM.

  3. #3
    Join Date
    Sep 2003
    Posts
    8

    Question

    Thanks for replying quickly Tirna. I'm going to need a little more help tho. I am a complete beginner with JS and web design. I think I'm putting stuff in the wrong place?

    here's a more full example of my code:

    HTML Code:
    
    <head>
    
    <title>Download the guide</title>
    <link rel=stylesheet href="file:///E|/ANEW/cs.css" type="text/css">
    
    <script language="javascript" src="file:///E|/ANEW/chainedselects.js"></script>
    <script language="javascript" src="file:///E|/ANEW/content_link.js"></script>
    
    <script language="javascript">
    function openLink(url) {
      if (url != "") {
        location.href = url;
      }
      else {
        alert("Please select a document.");
      }
    }
    </script>
    </head>
    <body onLoad="initListGroup('links', document.forms[0].category, document.forms[0].site);">
    
       <p align="center"><span class="style1">Please download and read the Checklist <a href="CheckLists.doc">HERE </a>before continuing </span>
       <center>
       
    <form>
    <div align="center">
      <input type="checkbox" name="checkbox" value="">
      I have read the Checklist
      <br>
      <br>
      
    
    </div>
    <form> <select name="category" style="width:180px"></select>
    <br>
    <br>
    <br>
    <select name="site" style="width:180px" onchange="openLink(this.value)"></select>
    <br>
    <br>
    <br>
    <input type="button" value="Open" onclick="openLink(this.form.site.value)">
    </form>
    </center>
    </body>
    I have no element ID's ??

  4. #4
    Join Date
    Sep 2003
    Posts
    8
    Can anybody help please?? I don't know where to put the code example provided by Tirna above, and the items I have don't seem to have any ID's ??

    Rob
    Last edited by eibbor_oxford; 06-26-2010 at 10:55 AM.

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    maybe use this as a guide to tweak your code to get it to work.

    If you run the code below, the select list is enabled only when the checkbox is ticked.


    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
     
    function 
    showHideSelList(elem) {
    if(
    elem.checked)   { 
       
    //enable the select list 
       
    document.getElementById("selMyList").disabled false
    } else {  
    //checkbox is not checked 
       //disable the select list 
        
    document.getElementById("selMyList").disabled true
    }
    }
     
    window.onload=function() {
       
    document.getElementById("selMyList").disabled true;
    }
     
    </script>
    </head>
    <body>
     
    <div>
         <input type="checkbox" onclick="showHideSelList(this)" />
         <select id="selMyList" name="selMyList">
                <option value="val1">Option 1</option>
                <option value="val2">Option 2</option>
                <option value="val3">Option 3</option>
                <option value="val4">Option 4</option>
          </select>
    </div>
     
    </body>
    </html> 

  6. #6
    Join Date
    Sep 2003
    Posts
    8

    Thanks

    Thanks for helping

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    no problem

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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