Page 1 of 1

javascript + forms

Posted: Fri Apr 09, 2004 6:52 pm
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?

Posted: Fri Apr 09, 2004 7:29 pm
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.

Posted: Sat Apr 10, 2004 11:44 am
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?

Posted: Sat Apr 10, 2004 1:22 pm
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>

Posted: Sat Apr 10, 2004 3:35 pm
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.

Posted: Sun Apr 11, 2004 3:25 pm
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?

Posted: Mon Apr 12, 2004 4:07 am
by bytte
ok, i managed to solve the prob.