Optellen value in Checkboxes
Ik wil van een x aantal checkboxes die ik display de waarde realtime optellen.
Maar ik wil dat de waarde alleen meegenomen wordt in de berekening wanneer de checkbox is aangevinkt.
Nu denk/gok/vermoed ik dat dat met jQuery te doen moet zijn, maar ik heb geen idee met welke functie.
Wie helpt me op weg?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tr>
<td colspan="2" value="4"> </td>
<td colspan="2"><input type="checkbox" id="4" name="product" value="mes" /> 1 mes</td>
<td>€ 98</td>
</tr>
<tr>
<td colspan="2" value="3"> </td>
<td colspan="2"><input type="checkbox" id="3" name="product" value="ansett_pin" /> Ansett Pin</td>
<td>€ 2</td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"><b>Totaal</b></td>
<td style="border-top: 3px solid black;">berekening output</td>
<td colspan="2" value="4"> </td>
<td colspan="2"><input type="checkbox" id="4" name="product" value="mes" /> 1 mes</td>
<td>€ 98</td>
</tr>
<tr>
<td colspan="2" value="3"> </td>
<td colspan="2"><input type="checkbox" id="3" name="product" value="ansett_pin" /> Ansett Pin</td>
<td>€ 2</td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"><b>Totaal</b></td>
<td style="border-top: 3px solid black;">berekening output</td>
Gewijzigd op 02/03/2011 11:34:20 door John Cena
Doe je iets met je formulier? Stuur je dat ergens op?
Indien wel: twee checkboxes met de zelfde name, is onzin.
Wat zou je willen dat opgeteld wordt?
ansett_pin + mes ?
(is er een wiskundige in de zaal?)
Herformuleer eens.
Gewijzigd op 02/03/2011 12:49:15 door Kris Peeters
De code staat er eigenlijk voor piet snot, want bovenstaande gebruik ik niet.
Groeten.
Als ik een hint mag geven: als je nog eens een vraag hebt en een stuk code dat daar niets mee te maken heeft, houd die code dan voor jou.
Aan de hand van geposte code proberen wij te achterhalen waar je naartoe wil gaan.
We halen er ook uit wat het algemene niveau is van de vragensteller.
Antwoorden die perfect juist zijn en geschikt zijn voor gevorderden zijn vaak totaal waardeloos voor een beginner.
We proberen een antwoord te geven dat wat in de zelfde stijl is geschreven als die van de geposte code.
Bon, wat moet er gebeuren met die opgetelde waarde?
Je spreekt over jQuery. Geen probleem, dat kan inderdaad.
Wil je een alert venster met die waarde? Iets anders?
Zijn het gehele getallen of floats?
Ja sorry, zal het nooit meer doen ;)
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
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
<?php
$body = '<form method="post" action="">
<input name="sum" id="sum"/><br/>
<hr>
<input type="checkbox" name="my_name[]" class="product" value="12.3"/> 12.323 <br/>
<input type="checkbox" name="my_name[]" class="product" value="7.13"/> 7.13 <br/>
<input type="checkbox" name="my_name[]" class="product" value="3.14"/> 3.14<br/>
<input type="checkbox" name="my_name[]" class="product" value="200.25"/> 200.25<br/>
<input type="button" value="OPTELLEN!" id="optellen_button"/><br/>
</form>';
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Optellen value in Checkboxes </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script>
// wordt getriggerd als de pagina (DOM) geladen is
$(document).ready(function() {
// bind een onClick event aan de button
$("#optellen_button").click(function(e) {
var selected_checkboxes = $(".product:checked");
var sum = 0;
for (var i=0; i<selected_checkboxes.length; i++) {
sum += Number( $(selected_checkboxes[i]).val() );
}
// som in de input steken
$("#sum").val(sum);
});
});
</script>
</head>
<body>
'. $body .'
</body>
</html>';
?>
$body = '<form method="post" action="">
<input name="sum" id="sum"/><br/>
<hr>
<input type="checkbox" name="my_name[]" class="product" value="12.3"/> 12.323 <br/>
<input type="checkbox" name="my_name[]" class="product" value="7.13"/> 7.13 <br/>
<input type="checkbox" name="my_name[]" class="product" value="3.14"/> 3.14<br/>
<input type="checkbox" name="my_name[]" class="product" value="200.25"/> 200.25<br/>
<input type="button" value="OPTELLEN!" id="optellen_button"/><br/>
</form>';
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Optellen value in Checkboxes </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script>
// wordt getriggerd als de pagina (DOM) geladen is
$(document).ready(function() {
// bind een onClick event aan de button
$("#optellen_button").click(function(e) {
var selected_checkboxes = $(".product:checked");
var sum = 0;
for (var i=0; i<selected_checkboxes.length; i++) {
sum += Number( $(selected_checkboxes[i]).val() );
}
// som in de input steken
$("#sum").val(sum);
});
});
</script>
</head>
<body>
'. $body .'
</body>
</html>';
?>
$(".product").change(function(e) {
(en verander de commentaar op lijn 24, uiteraard)
Gewijzigd op 02/03/2011 16:06:32 door Kris Peeters
Als ik die keihard bij value zet bij het definieren gaat dat wel goed, tot (uiteraard) er wat berekend wordt, want de value wordt vervangen.
Hoe gooi ik die er nu in?
Wanneer ik nou in de value iets anders wil zetten, kan ik dan bijvoorbeeld de waarde die nu in value staat in bijv een ID plaatsen?
Welke id (HTML id?)?
Welke value (van welk element)?
Wat ik nu krijg is dat ik in de volgende pagina (tzit in een form namelijk) niet kan zien welke nou allemaal aangevinkt zijn, alleen maar de prijzen van de aangevinkten kan zien.
Die zijn wel eens gelijk, en dus kan ik niet zien welke er nou besteld is.
Dus ik wil graag de value aanpassen en daar de naam van het artikel van maken, en de prijs op een andere manier meenemen, maar wel op de eerste pagina (zoals nu) berekenen.
Hoe werkt een checkbox?
Je kan aan een checkbox een naam geven, een value en een caption (tekst die je naast de checkbox ziet)
bv. je hebt een checkbox <input type="checkbox" name="mijn_checkbox"/>
Indien je (de client) die checkbox aanvinkt en het formulier opstuurt, wordt $_POST['mijn_checkbox'] = 'on'
Indien je die checkbox niet aanvinkt, wordt er niets opgestuurd. Het is niet zo dat $_POST['mijn_checkbox'] dan 'off' wordt of 0 of false of wat dan ook.
Je kan ook een value toevoegen aan een checkbox. Dan krijgt $_POST['mijn_checkbox'] die value.
Maar denk daar eens over na. In feite is dat vrij zinloos
Wat wil je op php niveau weten? Je wil weten of de gebruiker de checkbox heeft aangevinkt of niet. Meer hoef je niet te weten.
Jij - de scripter - weet namelijk zelf wat die value is, aangezien je die checkbox net zelf hebt gegenereerd.
Dus inderdaad, het enige wat je wil weten, is de id van de checkbox die aangevinkt en opgestuurd is geweest. Waaruit haal je die? uit de name van de checkbox.
Nu - we komen tot een conclusie - iets interessant: je kan in checkboxes met arrays werken. In de key van die array kan je gerust een id kwijt.
Voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_POST);
}
echo '<form method="post" action="">
<input type="checkbox" name="mijn_checkbox[5]"/> foo <br/>
<input type="checkbox" name="mijn_checkbox[8]"/> bar <br/>
<input type="checkbox" name="mijn_checkbox[11]"/> Hello <br/>
<input type="checkbox" name="mijn_checkbox[25]"/> World <br/>
<input type="submit" value="GO!"/>
</form>
';
?>
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_POST);
}
echo '<form method="post" action="">
<input type="checkbox" name="mijn_checkbox[5]"/> foo <br/>
<input type="checkbox" name="mijn_checkbox[8]"/> bar <br/>
<input type="checkbox" name="mijn_checkbox[11]"/> Hello <br/>
<input type="checkbox" name="mijn_checkbox[25]"/> World <br/>
<input type="submit" value="GO!"/>
</form>
';
?>
Bedenk eens dat je een prijslijst hebt en een winkelmandje met checkboxes.
Stel dat je de totale prijs zou berekenen aan de hand van de value die de client opstuurt ... Het is een fluitje van een cent voor een gebruiker om die value aan te passen.
De gebruiker kan dus die prijs op 0 zetten. Als je dan die prijs zou factureren, wordt je als verkoper zwaar in de zak gezet.
Houd dus nooit rekening met een value van een checkbox die verzonden is, hou enkel rekening met de id.
Controleren, doe je bv. zo:
Code (php)
Gewijzigd op 04/03/2011 12:55:51 door Kris Peeters
Chi Lion op 04/03/2011 14:20:28:
Dat zou inderdaad goed werken, was het niet dat de checkbox'n uit een database worden gevuld. Ik weet dus niet van te voren hoe de naam van de checkbox is.
Probeer me daar eens van te overtuigen.
De gegevens - die in de database staan - die je gebruikt om de checkboxes te maken, heb je nog nog steeds, op die zelfde plaats in de database, wanneer dat formulier ( enkele seconden later ) opgestuurd wordt.
In tussentijd hebben die records nog steeds de id, zijn die prijzen niet aangepast, ...
Ik echo de boxxjes ongeveer zo:
Code (php)
1
2
3
4
5
2
3
4
5
<?php
echo '<input type="checkbox" id="'.$i.'" class="product" value="'.$row['price'].'" name="'.$row['name'].'"/> '.$row['description'];
?>
echo '<input type="checkbox" id="'.$i.'" class="product" value="'.$row['price'].'" name="'.$row['name'].'"/> '.$row['description'];
?>