Aantallen optellen in een hidden field
ik zit met het volgende:
Ik heb een x-aantal selectievakken genaamd aantalX (afhankelijk van het aantal kleuren waarin een product leverbaar is)
De X achter "aantal" is een variabel nummer, beginnend bij 0 optellend met 1.
Ook heb ik een HIDDEN FIELD genaamd: Totaal (deze staat als standaard value 0)
Nu wil ik met javascript bereiken dat wanneer het aantal van een van de velden wijzigd, dit opgeteld / of afgetrokken wordt van het aantal in Totaal.
Dat moet zeg maar "live" gebeuren, dus zonder eerst een formulier te hoeven posten.
Gewijzigd op 26/10/2012 19:00:15 door Patrick Akkers
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
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
<?php
<!DOCTYPE html>
<html>
<head>
<script>
function counttotal() {
var total = 0;
// verkrijg een array van alle <input> tags
var arr = document.getElementsByTagName('input');
// loop door alle inputs
for(var x = 0 ; x < arr.length ; x++) {
// filter alleen <input type="checkbox"
if(arr.item(x).type == 'checkbox') {
// alleen de checkboxen met name="aantalX"
if(arr.item(x).name.substr(0,6) == 'aantal') {
// als de listbox aangevinkt is
if(arr.item(x).checked)
total++;
}
}
}
// geef de value van het element met id="totaal" een nieuwe waarde
document.getElementById('totaal').value = total;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="aantal0" onchange="counttotal();">blauw
<input type="checkbox" name="aantal1" onchange="counttotal();">groen
<input type="text" id="totaal" name="totaal">
</form>
</body>
</html>
?>
<!DOCTYPE html>
<html>
<head>
<script>
function counttotal() {
var total = 0;
// verkrijg een array van alle <input> tags
var arr = document.getElementsByTagName('input');
// loop door alle inputs
for(var x = 0 ; x < arr.length ; x++) {
// filter alleen <input type="checkbox"
if(arr.item(x).type == 'checkbox') {
// alleen de checkboxen met name="aantalX"
if(arr.item(x).name.substr(0,6) == 'aantal') {
// als de listbox aangevinkt is
if(arr.item(x).checked)
total++;
}
}
}
// geef de value van het element met id="totaal" een nieuwe waarde
document.getElementById('totaal').value = total;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="aantal0" onchange="counttotal();">blauw
<input type="checkbox" name="aantal1" onchange="counttotal();">groen
<input type="text" id="totaal" name="totaal">
</form>
</body>
</html>
?>
Gewijzigd op 26/10/2012 21:21:25 door Frank Nietbelangrijk