javascript + forms

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

javascript + forms

Post by bytte »

Hey all.

I have the next page with some dropdown boxes (select / option): http://www.abvv-wvl.be/boven.php

I want to disable the second dropdown box when the second option of the first dropdown box is clicked.
But then I want to enable the second dropdown box again, when the first option of the first dropdown box is clicked (eg when the user made a mistake and wants to select another option instead).

Can this be done?
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

Sure. Set onclick function calls to a javascript that toggles the disabled property of the other select elements. I don't have time to elaborate right now, but hopefully you see what I'm saying.

Also make sure to check these results server-side later if they are critical to the application.
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

Post by bytte »

Hey Unipus, thanks for the reply.
I couldn't make an onclick function work with the <OPTION> tag (see below code - doesn't work).

Code: Select all

<select name="selectName" size="1">
	<option onclick="yes();">- - - - - -</option>
	<option value="Brugge" onclick="no();">Brugge</option>
	<option value="Kortrijk" onclick="no();">Kortrijk</option>
	<option value="Oostende" onclick="no();">Oostende</option>
	<option value="Roeselare" onclick="no();">Roeselare</option>
	</select>




It does when I put the "onclick" in the <SELECT> tag, but then I can't solve my problem.


Or did I overlook something?
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

Try this out :

Code: Select all

<HTML>
<HEAD>
<SCRIPT language=JavaScript>
function selClick()
 &#123; 
 var el=document.createElement("OPTION");
 el.text=selectName.options&#1111;selectName.selectedIndex].text
 select1.add(el);
 &#125; 
</SCRIPT>
</HEAD>
<BODY>
<select name="selectName" size="1" onclick=selClick()> 
   <option selected>- - - - - -</option> 
   <option value="Brugge">Brugge</option> 
   <option value="Kortrijk">Kortrijk</option> 
   <option value="Oostende">Oostende</option> 
   <option value="Roeselare">Roeselare</option> 
</select>
<BR>
<SELECT size=2 id=select1 name=select1 style="WIDTH:50%;HEIGHT:80%">
<OPTION></OPTION>
</SELECT>
</BODY>
</HTML>
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

Similar to what anjanesh has said:

Code: Select all

function toggleDisable(initiator,target)
&#123;
     if (elm.value == "second option value")
     &#123;
           target.disable = "true";
     &#125;
&#125;


<select id="firstSelect" onclick="toggleDisable(this,'secondSelect')">
...
</select>
Not tested, should work.
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

Post by bytte »

Hey Unipus,
I can't make it work. This is my code:

Code: Select all

<html>

	<head>
		<title>test</title>
		
		
	</head>

	<body bgcolor="#ffffff">
	
	<SCRIPT language="JavaScript">
			function toggleDisable(initiator,target) &#123;
				     if (elm.value == "Brugge") 
				     &#123; 
				           target.disable = "true"; 
				     &#125; 
				&#125; 
					</SCRIPT>
	
	
	
		<p><font class="titel">Opvragen</font><br>
			<br>
		<form id="formulier" action="" method="get" name="formulier">
			<table width="770" border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="257">Centrale:</td>
					<td width="257">Subregio:</td>
					<td width="256">Gemeente:</td>
				</tr>
				<tr>
				
					<td width="257">
						
						<select id="centrale" name="c" size="1">
							<option>- - - - - -</option>
							<option value="AC">AC</option>
							<option value="ACOD">ACOD</option>
							<option value="BBTK">BBTK</option>
							<option value="CMB">CMB</option>
							<option value="TKD">TKD</option>
							<option value="Voeding">Voeding</option>
						</select>
				
					
					</td>
					<td width="257"><select id="firstSelect" size="1" onclick="toggleDisable(this,'centrale')">
							<option>- - - - - -</option>
							<option value="Brugge">Brugge</option>
							<option value="Kortrijk">Kortrijk</option>
							<option value="Oostende">Oostende</option>
							<option value="Roeselare">Roeselare&nbsp;/&nbsp;Ieper</option>
						</select></td>
									</tr>
			</table>
		</form>
		</p>
	</body>

</html>
what am i doing wrong?
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

Post by bytte »

ok, i managed to solve the prob.
Post Reply