How to disable drop-down lists

Question

tjmoosh 0 Newbie Poster

14 Years Ago

Hi there.

I'm looking for some help with drop-down lists.

The lists below are populated by lists.js (a script that was kindly written by a friend).

What I need to happen is that as soon as an option within one of the lists is selected, the other four become disabled.

I'm afraid I've no clue where to start (and I think I have prevailed on my friend's patience for long enough!) so here I am!

Any help would be very much appreciated.

Thomas

<html>
<head>
<script language="javascript" src="lists.js"></script>
</head>
<body width="750px" onload="fillarea();">
<div>

Newspaper<br><select id="newspaper" NAME="newspaper" style="width:350px"></select><br><br>

Magazine/Trade<br><select id="magazine" NAME="magazine" style="width:250px"></select><br><br>

Web<br><select id="web" NAME="web" style="width:250px"></select><br><br>

TV<br><select id="tv" NAME="tv" style="width:250px"></select><br><br>

Radio<br><select id="radio" NAME="radio" style="width:250px"></select>
	
</div>
</body>
</html>

javascript

Edited 14 Years Ago by tjmoosh because: n/a

3 Contributors
14 Replies
236 Views
1 Month Discussion Span
Latest Post 13 Years Ago Latest Post by tjmoosh

@developer 3 Junior Poster in Training

14 Years Ago

Try this...

<body>
	<div>
		Newspaper<br>
		<select id="newspaper" NAME="newspaper" style="width:350px" onchange="disable(this)">
			<option value="null"></option>
			<option value="news1">news1</option>
		</select>
		<br><br>
		
		Magazine/Trade<br>
		<select id="magazine" NAME="magazine" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="magazine1">magazine1</option>
		</select>
		<br><br>
		
		Web<br>
		<select id="web" NAME="web" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="web1">web1</option>
		</select>
		<br><br>
		
		TV<br>
		<select id="tv" NAME="tv" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="tv1">tv1</option>
		</select>
		<br><br>
		
		Radio<br>
		<select id="radio" NAME="radio" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="radio1">radio1</option>
		</select>
	</div>
</body>
<script type="text/javascript">
	function disable(element)
	{
		var selectArrayId = ["newspaper","magazine","web","tv","radio"];
		var excludeId = element.id;
		
		for(x in selectArrayId)
		{
			if(selectArrayId[x] != excludeId)
			{				                        document.getElementById(selectArrayId[x]).disabled=true;
			}
		}
	}
</script>

almostbob 866 Retired: passive income ROCKS

14 Years Ago

thats useful code, which I have added to my samplelist, than kyou
but not intuitive naming, in 18months time when there is a rewrite function disable(element) may cause programmer errors, why not function disableallother(element) is there a length limit to variables in javascript that I missed or some such

almostbob 866 Retired: passive income ROCKS

14 Years Ago

did you remember the bang in line 46,
if(selectArrayId[x] != excludeId)
without it the function would do the opposite

bang, ! <--- that thing

@developer 3 Junior Poster in Training

14 Years Ago

tjmoosh as almostbob said, please check whether the line

if(selectArrayId[x] != excludeId)

is in your code.

Edited 14 Years Ago by @developer because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tjmoosh 0 Newbie Poster · Answer 1 · 2010-12-21T21:58:29+00:00

Thanks!

Your code works exactly as I need it.

However, when I add the code to my form, the opposite of what I need occurs - that is to say the selected list becomes disabled and the remaining lists are accessible.

I'm certain I have copied your code to my form correctly. Could some other code within the html be interfering in some way?

@developer 3 Junior Poster in Training · Answer 2 · 2010-12-22T19:35:55+00:00

thats useful code, which I have added to my samplelist, than kyou
but not intuitive naming, in 18months time when there is a rewrite function disable(element) may cause programmer errors, why not function disableallother(element) is there a length limit to variables in javascript that I missed or some such

Yes almostbob the naming of the function wasn't right..just gave it for test..should change it... :)

tjmoosh 0 Newbie Poster · Answer 3 · 2010-12-22T23:14:43+00:00

tjmoosh as almostbob said, please check whether the line
if(selectArrayId[x] != excludeId)
is in your code.

Yes - it's definitely there.

But I've discovered where the problem now lies.

I'm using something called Really Easy Field Validation (REFV) to validate some of the fields before the form is submitted.

REFV uses something called Prototype JavaScript Framework - version 1.5.0 works with REFV.

There is something within that script that makes your code behave back to front!

It's a huge script (2500 lines!) - too much to look through for such a small problem.

However, I want to thank for giving me code that works. I'll look into finding something similar to REFV that doesn't conflict with your solution to my problem.

Thanks again for your time and efforts.

@developer 3 Junior Poster in Training · Answer 4 · 2010-12-23T18:52:12+00:00

Yes always tjmoosh..Ok just out of curiosity, you said the code is behaving opposite..then try removing the '!' in the line..
ie try like this..

if(selectArrayId[x] = excludeId)

tjmoosh 0 Newbie Poster · Answer 5 · 2010-12-29T18:15:22+00:00

Hi @developer.

Yes, I tried removing the ! but the behaviour remained the same. But I have since found a validation system (called wForms) that doesn't interfere with the code you provided. I'm starting to integrate things now so thank you once again.

However, I now have a follow-up question.

Say, for example, one of the users of the form mistakenly chose the "newspaper" option, when they meant to pick the "web" option. Would it be possible to add some sort of reset button that would enable the elements again?

To be clear, I don't wish to rest the whole form, just re-enable the elements that were disabled by the script.

@developer 3 Junior Poster in Training · Answer 6 · 2010-12-29T20:00:23+00:00

This would enable all the select options..
Put this Reset button in the body:

<input type="button" value="Reset" onclick="enableAllSelect()">

In the script add this function:

function enableAllSelect()
	{
		var selectArrayId = ["newspaper","magazine","web","tv","radio"];
		
		for(x in selectArrayId)
		{
			document.getElementById(selectArrayId[x]).disabled=false;
		}
	}

tjmoosh 0 Newbie Poster · Answer 7 · 2010-12-29T20:57:31+00:00

Once again an excellent response. Works perfectly.

Thank you!

tjmoosh 0 Newbie Poster · Answer 8 · 2011-01-26T20:58:51+00:00

Hi @developer.

I have another follow up request as I need to further refine the way the form works.

The whole point of what you have been helping me with is to prevent entries from two or more lists being selected at once.

With that in mind and thinking about the button that re-enables the menus - is it possible to also return the selected menu to its default state i.e. with nothing selected when that button is clicked?

<input name="OtherOutlet" id="OtherOutlet" type="text" size="50" maxlength="255">

The above field has been added to the form and an item called "Other" has been added to each of the existing five lists. Is it possible to make the free text field inactive by default, only becoming active when specifically "Other" has been from selected from any of the lists? (The previous behaviour of the other four lists becoming inactive when "Other" is selected should also happen).

Any help would be much appreciated.

@developer 3 Junior Poster in Training · Answer 9 · 2011-02-16T19:55:59+00:00

Hi tjmoosh,
This is the entire code with the changes.Please check it and know whether thats the requirement.Hope that works. :)

<body>
	<div>
		Newspaper<br>
		<select id="newspaper" NAME="newspaper" style="width:350px" onchange="disable(this)">
			<option value="null"></option>
			<option value="news1">news1</option>
			<option value="other">Other</option>
		</select>
		<br><br>
		
		Magazine/Trade<br>
		<select id="magazine" NAME="magazine" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="magazine1">magazine1</option>
			<option value="other">Other</option>
		</select>
		<br><br>
		
		Web<br>
		<select id="web" NAME="web" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="web1">web1</option>
			<option value="other">Other</option>
		</select>
		<br><br>
		
		TV<br>
		<select id="tv" NAME="tv" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="tv1">tv1</option>
			<option value="other">Other</option>
		</select>
		<br><br>
		
		Radio<br>
		<select id="radio" NAME="radio" style="width:250px" onchange="disable(this)">
			<option value="null" ></option>
			<option value="radio1">radio1</option>
			<option value="other">Other</option>
		</select>
		<br><br>
		Other
		<input name="OtherOutlet" id="OtherOutlet" type="text" size="50" maxlength="255" disabled="true"><br /><br />
		<input type="button" value="Reset" onclick="enableAllSelect()">
	</div>
</body>
<script type="text/javascript">
	function disable(element)
	{
		var selectArrayId = ["newspaper","magazine","web","tv","radio"];
		var excludeId = element.id;
		var selectValue = element.value;
		
		if(selectValue == "other")
		{
			document.getElementById("OtherOutlet").disabled=false;
		} 
		
		for(x in selectArrayId)
		{
			if(selectArrayId[x] != excludeId)
			{				                        
				document.getElementById(selectArrayId[x]).disabled=true;
			}
		}
	}
	
	function enableAllSelect()
	{
		var selectArrayId = ["newspaper","magazine","web","tv","radio"];
		
		for(x in selectArrayId)
		{
			document.getElementById(selectArrayId[x]).disabled=false;
			document.getElementById(selectArrayId[x]).value="null";
			document.getElementById("OtherOutlet").disabled=true;
			document.getElementById("OtherOutlet").value="";
		}
	}
</script>

tjmoosh 0 Newbie Poster · Answer 10 · 2011-02-17T01:18:51+00:00

As ever this works perfectly!

Thanks again @developer for your amazing help.