Help with disabling [Archive]

freshb

12-15-2003, 01:55 PM

Hi guys, I've already done a search through the forums and found 2 threads dealing with this issue, but to be honest, I am COMPLETELY new at JavaScript, and I couldnt quite use the advice given in the threads as they definitely assumed a bit of background knowledge. I know the basic makeup of the language, and how to embed scripts into useful web apps, but as for programming Javascript, I'm a total newbie.

So here is my problem : I have two drop down select boxes in a simple HTML form. I want both to be enabled at form load, but, when one of the drop downs is set to anything but the default value, the other one is disabled. Of course, this is to happen without submitting the form.

Probably beyond easy for you guys, but its a mammoth problem for me, and to be honest, I really dont have the time in my deadline to buy a book and figure it out for myself. Any help (detailed like you're talking to someone who doesnt know a damn thing about programing Javascript) would be HUGELY appreciated!! You can use generic field names, I know enough to customize the script to fit my needs, I just dont know how the whole mechanism works.

Thanks!!!

requestcode

12-15-2003, 02:08 PM

Here is an example on one I did a while ago:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
function disdrop(selobj,frmobj)
{
if(selobj.name=="dropd")
{
if(selobj.selectedIndex==0)
{document.myform.drope.disabled=false}
else
{document.myform.drope.disabled=true}
}
if(selobj.name=="drope")
{
if(selobj.selectedIndex==0)
{document.myform.dropd.disabled=false}
else
{document.myform.dropd.disabled=true}
}
}
</script>
</head>
<body bgcolor="lightgreen">
<center>
<form name="myform">
<select name="dropd" onchange="disdrop(this,this.form)">
<option selected>Select One
<option> Page One</option>
<option> Page Two</option>
<option> Page Three</option>
</select>
<select name="drope" onchange="disdrop(this,this.form)">
<option selected>Select One
<option> Page One</option>
<option> Page Two</option>
<option> Page Three</option>
</select>
</form>
</center>
</body>
</html>

fredmv

12-15-2003, 02:19 PM

Here's a fully commented example I put together:<!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" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
// When the document is finished loading (so all of the nodes, mainly the
// <select> elements are loaded when we run this), execute this code.
onload = function()
{
// Create an onchange event handler. This fires when the user changes
// the value of the element. In this case, when the user selects a different
// option of the <select> element. Notice I access it through the DOM
// (Document Object Model) like this: document.forms[0]['sel1']. This is
// the simplest and most correct notation for access child nodes of a form.
// What this is basically saying is: "look in the first form of the document
// and access the element named "sel1" and when an onchange event occurs, execute
// this annoymous function.
document.forms[0]['sel1'].onchange = function()
{
// Check if the value if different than the default.
if(this.value != '')
{
// If it is, disable the other <select> element, using the same notation
// just as we accesses this element.
document.forms[0]['sel2'].disabled = true;
}

// Else, it was the default value, so enable the other <select> element.
else
{
document.forms[0]['sel2'].disabled = false;
}
}

// Now, this is the same exact thing execept we're listening for events on the
// second <select> element as opposed to the first.
document.forms[0]['sel2'].onchange = function()
{
if(this.value != '')
{
document.forms[0]['sel1'].disabled = true;
}

else
{
document.forms[0]['sel1'].disabled = false;
}
}
}
//]]>
</script>
</head>
<body>
<form action="#">
<div>
<select name="sel1">
<option value="">< select an option ></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select name="sel2">
<option value="">< select an option ></option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
</div>
</form>
</body>
</html>It could be much more compact than that, but I wanted to make it as easy as possible to understand.

freshb

12-15-2003, 02:21 PM

This works perfectly! Thanks you!!!

freshb

12-15-2003, 02:22 PM

Actaully they both work. I tried em both. thanks guys!

fredmv

12-15-2003, 02:25 PM

You're welcome. :cool: