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

**eibbor_oxford** · 06-26-2010 07:57 AM

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

**tirna** · 06-26-2010 08:18 AM

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;

}

**eibbor_oxford** · 06-26-2010 09:11 AM

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 ??

**eibbor_oxford** · 06-26-2010 09:51 AM

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

**tirna** · 06-26-2010 06:07 PM

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>

**eibbor_oxford** · 06-30-2010 12:27 PM

Thanks for helping

**tirna** · 06-30-2010 04:55 PM

no problem

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

Thread Tools

Display

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

Thanks

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions