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()
{
var el=document.createElement("OPTION");
el.text=selectName.optionsїselectName.selectedIndex].text
select1.add(el);
}
</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)
{
if (elm.value == "second option value")
{
target.disable = "true";
}
}
<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) {
if (elm.value == "Brugge")
{
target.disable = "true";
}
}
</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 / 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.