javascript: onChange
Ik ben geen ster in javascript, maar ik weet wel wat het kan. Nu vroeg ik me af of het mogelijk was om een onchange actie te verbinden een een selectielijst (zie hieronder). De bedoeling is dat als ik bijvoorbeeld een van mijn huisgenoten selecteer (Aike ofzo), dat dan het radiovakje van Aike standaard naar 1 springt en dat het radiovakje 0 disabled word.
Ik weet niet hoe ik het duidelijk moet uitleggen, dus als je vragen hebt stel ze dan :) Als iemand weet hoe ik dit kan oplossen gaat deze persoon mij heel blij maken aangezien ik gisteravond van 7 tot 12 bezig ben geweest om via google enzovoorts uit te zoeken hoe het moest :S...
Bedankt!
Sytze
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<form action="index.php?p=add&save=TRUE" method="post" name="add" id="add">
<select name="payer" id="payer">
<option value="2">Aike</option>
<option value="6">Dorien</option>
<option value="4">Leon</option>
<option value="5">Marieke</option>
<option value="3">Saskia</option>
<option value="1">Sytze</option>
<option value="7">Tanya</option>
</select>
<table border="0" cellspacing="0">
<tr>
<td>Aike:</td>
<td><input name="user_id[2]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[2]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[2]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[2]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Dorien:</td>
<td><input name="user_id[6]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[6]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[6]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[6]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Leon:</td>
<td><input name="user_id[4]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[4]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[4]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[4]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Marieke:</td>
<td><input name="user_id[5]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[5]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[5]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[5]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Saskia:</td>
<td><input name="user_id[3]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[3]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[3]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[3]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Sytze:</td>
<td><input name="user_id[1]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[1]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[1]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[1]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Tanya:</td>
<td><input name="user_id[7]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[7]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[7]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[7]" type="radio" value="3" /></td>
<td>3</td>
</tr>
</table>
</form>
<select name="payer" id="payer">
<option value="2">Aike</option>
<option value="6">Dorien</option>
<option value="4">Leon</option>
<option value="5">Marieke</option>
<option value="3">Saskia</option>
<option value="1">Sytze</option>
<option value="7">Tanya</option>
</select>
<table border="0" cellspacing="0">
<tr>
<td>Aike:</td>
<td><input name="user_id[2]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[2]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[2]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[2]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Dorien:</td>
<td><input name="user_id[6]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[6]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[6]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[6]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Leon:</td>
<td><input name="user_id[4]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[4]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[4]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[4]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Marieke:</td>
<td><input name="user_id[5]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[5]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[5]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[5]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Saskia:</td>
<td><input name="user_id[3]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[3]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[3]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[3]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Sytze:</td>
<td><input name="user_id[1]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[1]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[1]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[1]" type="radio" value="3" /></td>
<td>3</td>
</tr>
<tr>
<td>Tanya:</td>
<td><input name="user_id[7]" type="radio" value="0" checked="checked" /></td>
<td>0</td>
<td><input name="user_id[7]" type="radio" value="1" /></td>
<td>1</td>
<td><input name="user_id[7]" type="radio" value="2" /></td>
<td>2</td>
<td><input name="user_id[7]" type="radio" value="3" /></td>
<td>3</td>
</tr>
</table>
</form>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
function payerChangeCallback(element)
{
var user_id = element.options[element.selectedIndex].value;
var user_nodes = document.forms['add']['user_id[' + user_id + ']'];
for(var i = 0; i < user_nodes.length; i++) {
var node = user_nodes[i];
if(node.value == '0') {
node.disabled = true;
node.checked = false;
}
else if(node.value == '1') {
node.checked = true;
}
else {
node.checked = false;
}
}
}
</script>
<form action="index.php?p=add&save=TRUE" method="post" name="add" id="add">
<select name="payer" id="payer" onchange="payerChangeCallback(this)">
[...]
function payerChangeCallback(element)
{
var user_id = element.options[element.selectedIndex].value;
var user_nodes = document.forms['add']['user_id[' + user_id + ']'];
for(var i = 0; i < user_nodes.length; i++) {
var node = user_nodes[i];
if(node.value == '0') {
node.disabled = true;
node.checked = false;
}
else if(node.value == '1') {
node.checked = true;
}
else {
node.checked = false;
}
}
}
</script>
<form action="index.php?p=add&save=TRUE" method="post" name="add" id="add">
<select name="payer" id="payer" onchange="payerChangeCallback(this)">
[...]
Dat werkt in ieder geval in Firefox. In Internet Explorer moet je het zelf even proberen.
Sytze