Click to See Complete Forum and Search --> : javascript solution?
hi everybody!
I'm on a schoolproject right now. We have to code a page where pupils can sign up for a sports competiton.
My problem is that pupils from the first form can't apply for 100m sprint because of their age.
I want to make a drop-down menu connected to checkboxes that if you select 1.class the checkbox of 100m sprint gets disabled.
I've already thried to do that here:
<html>
<head>
<title>Untitled Document</title>
</head>
<script language="JavaScript" type="text/javascript">
function test(){
if(document.form.Jahrgang==v1){
document.form.lauf2.disabled= true;
}
else{
document.form.lauf2.checked= false;//sets it selected
}
</script>
<form action="anmeldeseite.php" method="post" name="form">
<select name="Jahrgang">
<option value="v1">1. oder 2. Klasse VS</option>
<option value="v2">3. oder 4. Klasse VS</option>
<option value="d">Jahrgang 95-94</option>
<option value="c">Jahrgang 92-93</option>
<option value="b">Jahrgang 90-91</option>
</select>
<br>
<input name="Weitsprung" type="checkbox" value="ws"> Weitsprung<br>
<input name="60m" type="checkbox" value="60m"> 60m Lauf<br>
<input name="100m" type="checkbox" value="lauf2"> 100m Lauf<br>
<input name="Kugelstos" type="checkbox" value="kugel"> Kugelstoß<br>
<input name="schlagball" type="checkbox" value="ball"> Schlagball<br>
<input name="1500m" type="checkbox" value="1500m"> 1500m Lauf<br>
<input name="3000m" type="checkbox" value="3000m"> 3000m Lauf<br>
</form>
<body>
</body>
</html>
please help!
First at all, name and id must not begin with a digit. Only letters and underscores are permitted as first character. Insert let's say an underscore as first char : '_60m','_100m' and so on
Now try:
<select name="Jahrgang" onselect="this.form['_100m'].disabled=!Boolean(this.selectedIndex)">
and take care, when referencing elements don't mix up names with values. Elements are to be found mainly upon their names, not values.
EricW
06-08-2006, 10:08 AM
<html> <head> <title>Untitled Document</title> </head>
<script language="JavaScript" type="text/javascript">
function test(value){
alert(value);
obj=document.getElementById("100m");
if(value=="v1"){
obj.disabled= true;
obj.checked= false;
} else {
obj.disabled= false;
}
}
</script>
<body>
<form action="anmeldeseite.php" method="post" name="form">
<select name="Jahrgang" onchange="test(this.value);">
<option value=""></option>
<option value="v1">1. oder 2. Klasse VS</option>
<option value="v2">3. oder 4. Klasse VS</option>
<option value="d">Jahrgang 95-94</option>
<option value="c">Jahrgang 92-93</option>
<option value="b">Jahrgang 90-91</option>
</select>
<br>
<input name="Weitsprung" type="checkbox" value="ws"> Weitsprung<br>
<input name="60m" type="checkbox" value="60m"> 60m Lauf<br>
<input id="100m" name="100m" type="checkbox" value="lauf2"> 100m Lauf<br>
<input name="Kugelstos" type="checkbox" value="kugel"> Kugelstoß<br>
<input name="schlagball" type="checkbox" value="ball"> Schlagball<br>
<input name="1500m" type="checkbox" value="1500m"> 1500m Lauf<br>
<input name="3000m" type="checkbox" value="3000m"> 3000m Lauf<br>
</form>
</body>
</html>
thank you very much for the advice ^^
EricW, name and id are different things. the controls have names, and you used getElementById(). Only IE incorrectly takes names as ids, if no id is to found, but this is only an ennoying IE bug...
EricW
06-08-2006, 10:50 AM
Kor,
Because this was for a school project, I just hacked a solution...
EricW, name and id are different things. the controls have names, and you used getElementById(). Only IE incorrectly takes names as ids, if no id is to found, but this is only an ennoying IE bug...
okay my only other problem left is that it should disable multiple boxes... I've tried to do that with
<script language="JavaScript" type="text/javascript">
function test(value){
obja=document.getElementById("100m");
objb=document.getElementById("ws");
if(value=="v1"){
obja.disabled= true;
obja.checked= false;
objb.disabled= true;
objb.checked= false;
}
else {
obja.disabled= false;
obja.disabled= false;
}
}
</script>
but it doesn't seem to work...
"ws" is not a name, is a value
have u tried my solution?
<select name="Jahrgang" onselect="this.form['_100m'].disabled=!Boolean(this.selectedIndex)">
"ws" is not a name, is a value
have u tried my solution?
<select name="Jahrgang" onselect="this.form['_100m'].disabled=!Boolean(this.selectedIndex)">
:confused: It doesn't seem to work :confused:
because I told you to change the name from "100m" into "_100m". And the same with all the names which begin with a digit. Haven't u read my post?
EricW
06-08-2006, 11:17 AM
<html> <head> <title>Untitled Document</title> </head>
<script language="JavaScript" type="text/javascript">
function test(value){
obja=document.getElementsByName("100m")[0]; // using first occurrence of name="100m"
objb=document.getElementsByName("Weitsprung")[0]; // using first occurrence of name="Weitsprung"
if(value=="v1"){
obja.disabled= true;
obja.checked= false;
objb.disabled= true;
objb.checked= false;
} else {
obja.disabled= false;
objb.disabled= false;
}
}
</script>
<body>
<form action="anmeldeseite.php" method="post" name="form">
<select name="Jahrgang" onchange="test(this.value);">
<option value=""></option>
<option value="v1">1. oder 2. Klasse VS</option>
<option value="v2">3. oder 4. Klasse VS</option>
<option value="d">Jahrgang 95-94</option>
<option value="c">Jahrgang 92-93</option>
<option value="b">Jahrgang 90-91</option>
</select>
<br>
<input name="Weitsprung" type="checkbox" value="ws"> Weitsprung<br>
<input name="60m" type="checkbox" value="60m"> 60m Lauf<br>
<input name="100m" type="checkbox" value="lauf2"> 100m Lauf<br>
<input name="Kugelstos" type="checkbox" value="kugel"> Kugelstoß<br>
<input name="schlagball" type="checkbox" value="ball"> Schlagball<br>
<input name="1500m" type="checkbox" value="1500m"> 1500m Lauf<br>
<input name="3000m" type="checkbox" value="3000m"> 3000m Lauf<br>
</form>
</body>
</html>
yeah thx I'm almost done!
Last problem: the other classes have to be disabled
like I got v1 but now v2 needs to get restricted checkboxes
<html> <head> <title>Untitled Document</title> </head>
<script language="JavaScript" type="text/javascript">
function test(value){
obja=document.getElementById("100m");
objb=document.getElementById("kugel");
objc=document.getElementById("3000m");
if(value=="v1"){
obja.disabled= true;
obja.checked= false;
objb.disabled= true;
objb.checked= false;
objc.disabled= true;
objc.checked= false;
}
if(value=="v2"){
obja.disabled= true;
obja.checked= false;
objb.disabled= true;
objb.checked= false;
objc.disabled= true;
objc.checked= false;
}
else {
obja.disabled= false;
objb.disabled= false;
objc.disabled= false;
}
}
</script>
<body>
<form action="anmeldeseite.php" method="post" name="form">
<select name="Jahrgang" onchange="test(this.value);">
<option value=""></option>
<option value="v1">1. oder 2. Klasse VS</option>
<option value="v2">3. oder 4. Klasse VS</option>
<option value="d">Jahrgang 95-94</option>
<option value="c">Jahrgang 92-93</option>
<option value="b">Jahrgang 90-91</option>
</select>
<br>
<input id="ws" name="ws" type="checkbox" value="ws"> Weitsprung<br>
<input id="60m" name="60m" type="checkbox" value="60m"> 60m Lauf<br>
<input id="100m" name="100m" type="checkbox" value="100m"> 100m Lauf<br>
<input id="kugel" name="kugel" type="checkbox" value="kugel"> Kugelstoß<br>
<input id="ball" name="ball" type="checkbox" value="ball"> Schlagball<br>
<input id="1500m" name="1500m" type="checkbox" value="1500m"> 1500m Lauf<br>
<input id="3000m" name="3000m" type="checkbox" value="3000m"> 3000m Lauf<br>
</form>
</body>
</html>
somehow like that?
EricW
06-08-2006, 11:58 AM
<html> <head> <title>Untitled Document</title> </head>
<script language="JavaScript" type="text/javascript">
function test(value){
obja=document.getElementById("100m");
objb=document.getElementById("kugel");
objc=document.getElementById("3000m");
if(value=="v1"){
obja.disabled= true;
obja.checked= false;
objb.disabled= true;
objb.checked= false;
objc.disabled= true;
objc.checked= false;
} else if(value=="v2") {
obja.disabled= true;
obja.checked= false;
objb.disabled= true;
objb.checked= false;
objc.disabled= true;
objc.checked= false;
} else {
obja.disabled= false;
objb.disabled= false;
objc.disabled= false;
}
}
</script>
<body>
<form action="anmeldeseite.php" method="post" name="form">
<select name="Jahrgang" onchange="test(this.value);">
<option value=""></option>
<option value="v1">1. oder 2. Klasse VS</option>
<option value="v2">3. oder 4. Klasse VS</option>
<option value="d">Jahrgang 95-94</option>
<option value="c">Jahrgang 92-93</option>
<option value="b">Jahrgang 90-91</option>
</select>
<br>
<input id="ws" name="ws" type="checkbox" value="ws"> Weitsprung<br>
<input id="60m" name="60m" type="checkbox" value="60m"> 60m Lauf<br>
<input id="100m" name="100m" type="checkbox" value="100m"> 100m Lauf<br>
<input id="kugel" name="kugel" type="checkbox" value="kugel"> Kugelstoß<br>
<input id="ball" name="ball" type="checkbox" value="ball"> Schlagball<br>
<input id="1500m" name="1500m" type="checkbox" value="1500m"> 1500m Lauf<br>
<input id="3000m" name="3000m" type="checkbox" value="3000m"> 3000m Lauf<br>
</form>
</body>
</html>