/    Sign up×
Community /Pin to ProfileBookmark

Help with disabling

Copy linkTweet thisAlerts:
Dec 15.2003

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

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@requestcodeDec 15.2003 — 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>
Copy linkTweet thisAlerts:
@fredmvDec 15.2003 — Here's a fully commented example I put together:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
&lt;head&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
[color=teal][b]// When the document is finished loading (so all of the nodes, mainly the
// &lt;select&gt; elements are loaded when we run this), execute this code.[/b][/color]
onload = function()
{
[color=teal][b]// 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 &lt;select&gt; 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.[/b][/color]
document.forms[0]['sel1'].onchange = function()
{
[color=teal][b]// Check if the value if different than the default.[/b][/color]
if(this.value != '')
{
[color=teal][b]// If it is, disable the other &lt;select&gt; element, using the same notation
// just as we accesses this element.[/color][/b]
document.forms[0]['sel2'].disabled = true;
}

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

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

<i> </i> else
<i> </i> {
<i> </i> document.forms[0]['sel1'].disabled = false;
<i> </i> }
<i> </i> }
<i> </i> }
<i> </i> //]]&gt;
<i> </i> &lt;/script&gt;
<i> </i>&lt;/head&gt;
<i> </i>&lt;body&gt;
<i> </i> &lt;form action="#"&gt;
<i> </i> &lt;div&gt;
<i> </i> &lt;select name="sel1"&gt;
<i> </i> &lt;option value=""&gt;&amp;lt; select an option &amp;gt;&lt;/option&gt;
<i> </i> &lt;option value="a"&gt;a&lt;/option&gt;
<i> </i> &lt;option value="b"&gt;b&lt;/option&gt;
<i> </i> &lt;option value="c"&gt;c&lt;/option&gt;
<i> </i> &lt;/select&gt;
<i> </i> &lt;select name="sel2"&gt;
<i> </i> &lt;option value=""&gt;&amp;lt; select an option &amp;gt;&lt;/option&gt;
<i> </i> &lt;option value="d"&gt;d&lt;/option&gt;
<i> </i> &lt;option value="e"&gt;e&lt;/option&gt;
<i> </i> &lt;option value="f"&gt;f&lt;/option&gt;
<i> </i> &lt;/select&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/form&gt;
<i> </i>&lt;/body&gt;
&lt;/html&gt;It could be much more compact than that, but I wanted to make it as easy as possible to understand.
Copy linkTweet thisAlerts:
@freshbauthorDec 15.2003 — This works perfectly! Thanks you!!!
Copy linkTweet thisAlerts:
@freshbauthorDec 15.2003 — Actaully they both work. I tried em both. thanks guys!
Copy linkTweet thisAlerts:
@fredmvDec 15.2003 — You're welcome. ?
×

Success!

Help @freshb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...