Bedrag automatisch optellen
ik ben absoluut niet thuis in Javascript,
maar het probleem is als volgt:
Ik heb een bestelpagina waar men het aantal artikelen kan selecteren.
Wanneer 1 artikel 20 euro kost en men kiest in de dropdown voor aantal: 5 stuks, dan moet het bedrag automatsch 100 euro worden.
Live op de website om het zo te zeggen. Het moet dus direct optellen.
Het bedrag staat in een DIV weergeven en volgens mij kan bovenstaande dus met ajax/javascript, maar iemand een idee waar ik zo een script vind?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<FORM NAME="productenlijst">
<INPUT TYPE="text" NAME="kwantiteit" VALUE="">
<INPUT TYPE="button" NAME="updateKnop" VALUE="+" onClick="rekenen();">
</FORM>
<script>
function rekenen(this){
var bedrag = '(hier dynamisch invullen)';
var aantal = '(zelfde met de waarde van "kwantiteit")';
eval("document.write(bedrag*aantal)");
</script>
<INPUT TYPE="text" NAME="kwantiteit" VALUE="">
<INPUT TYPE="button" NAME="updateKnop" VALUE="+" onClick="rekenen();">
</FORM>
<script>
function rekenen(this){
var bedrag = '(hier dynamisch invullen)';
var aantal = '(zelfde met de waarde van "kwantiteit")';
eval("document.write(bedrag*aantal)");
</script>
Over eval():
http://www.w3schools.com/jsref/jsref_eval.ASP
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function bereken()
{
var num_shirt = document.getElementById('aantalshirt').value;
var num_broek = document.getElementById('aantalbroek').value;
var num_schoen = document.getElementById('aantalschoenen').value;
var punten_shirt = 4;
var punten_broek = 2;
var punten_schoen = 8;
var total_shirt = num_shirt*punten_shirt;
var total_broek = num_broek*punten_broek;
var total_schoen = num_schoen*punten_schoen;
var total = total_shirt + total_broek + total_schoen;
document.getElementById('totaalshirt').value = total_shirt;
document.getElementById('totaalbroek').value = total_broek;
document.getElementById('totaalschoenen').value = total_schoen;
document.getElementById('totaal').value = total;
}
</script>
</head>
<body><br><br><br>
<table width="422" height="179" border="0">
<tr>
<td width="59">shirt:</td>
<td width="144"><input type="text" id="aantalshirt" /></td>
<td width="133"><input type="text" id="totaalshirt" /></td>
</tr>
<tr>
<td>broek:</td>
<td><input type="text" id="aantalbroek" /></td>
<td><input type="text" id="totaalbroek" /></td>
</tr>
<tr>
<td>schoenen:</td>
<td><input type="text" id="aantalschoenen" /></td>
<td><input type="text" id="totaalschoenen" /></td>
</tr>
<tr>
<td>totaal aantal punten: </td>
<td> </td>
<td><input type="text" id="totaal" /></td>
</tr>
</table>
<br>
<button onclick="bereken();">Bereken</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function bereken()
{
var num_shirt = document.getElementById('aantalshirt').value;
var num_broek = document.getElementById('aantalbroek').value;
var num_schoen = document.getElementById('aantalschoenen').value;
var punten_shirt = 4;
var punten_broek = 2;
var punten_schoen = 8;
var total_shirt = num_shirt*punten_shirt;
var total_broek = num_broek*punten_broek;
var total_schoen = num_schoen*punten_schoen;
var total = total_shirt + total_broek + total_schoen;
document.getElementById('totaalshirt').value = total_shirt;
document.getElementById('totaalbroek').value = total_broek;
document.getElementById('totaalschoenen').value = total_schoen;
document.getElementById('totaal').value = total;
}
</script>
</head>
<body><br><br><br>
<table width="422" height="179" border="0">
<tr>
<td width="59">shirt:</td>
<td width="144"><input type="text" id="aantalshirt" /></td>
<td width="133"><input type="text" id="totaalshirt" /></td>
</tr>
<tr>
<td>broek:</td>
<td><input type="text" id="aantalbroek" /></td>
<td><input type="text" id="totaalbroek" /></td>
</tr>
<tr>
<td>schoenen:</td>
<td><input type="text" id="aantalschoenen" /></td>
<td><input type="text" id="totaalschoenen" /></td>
</tr>
<tr>
<td>totaal aantal punten: </td>
<td> </td>
<td><input type="text" id="totaal" /></td>
</tr>
</table>
<br>
<button onclick="bereken();">Bereken</button>
</body>
</html>
Enkel, wanneer ik op de pagina bestellen kom dan moet de prijs die hij aangeeft al standaard "20" zijn, maar dat is nu "0".
Hoe pas ik dat aan?
Quote:
<script type="text/javascript">
var totaalprijs = 0; // Deze variabele bevat de totaalprijs (niet aanpassen)
var prijzen = new Array(); // De array met de prijs en het aantal van het product.
prijzen[0] = new Array(2.35, 0); // De eerste 0 is het id, 2.35 is de prijs van product 0, en 0 het aantal.
prijzen[1] = new Array(1.20, 0); // Bij deze dus alleen de prijs aanpassen.
// Met onchange="update(x, this)" in een input veld kan je dus het aantal in de array prijzen[x] aanpassen.
function update(id, veld) {
if(!veld.value.match(/([0-9]+)/)) {
alert('Vul a.u.b een aantal in.');
veld.value = 0;
} else {
prijzen[id][1] = veld.value;
totaal();
}
}
function totaal() {
totaalprijs = 0;
for (i in prijzen) {
totaalprijs = totaalprijs + (prijzen[0] * prijzen[1]);
}
document.getElementById('totaal').innerHTML = totaalprijs;
}
</script>
<body>
<select name="prijs" onchange="update(0, this)"><option value="1">1</option><option value="2">2</option></select>
Totaal: €<span id="totaal">0,-</span></body>
</html> [/quote]
var totaalprijs = 0; // Deze variabele bevat de totaalprijs (niet aanpassen)
var prijzen = new Array(); // De array met de prijs en het aantal van het product.
prijzen[0] = new Array(2.35, 0); // De eerste 0 is het id, 2.35 is de prijs van product 0, en 0 het aantal.
prijzen[1] = new Array(1.20, 0); // Bij deze dus alleen de prijs aanpassen.
// Met onchange="update(x, this)" in een input veld kan je dus het aantal in de array prijzen[x] aanpassen.
function update(id, veld) {
if(!veld.value.match(/([0-9]+)/)) {
alert('Vul a.u.b een aantal in.');
veld.value = 0;
} else {
prijzen[id][1] = veld.value;
totaal();
}
}
function totaal() {
totaalprijs = 0;
for (i in prijzen) {
totaalprijs = totaalprijs + (prijzen[0] * prijzen[1]);
}
document.getElementById('totaal').innerHTML = totaalprijs;
}
</script>
<body>
<select name="prijs" onchange="update(0, this)"><option value="1">1</option><option value="2">2</option></select>
Totaal: €<span id="totaal">0,-</span></body>
</html> [/quote]
Gewijzigd op 29/08/2012 22:18:17 door Patrick Akkers
Maar voor een rekensom als dit zal dat niet nodig zijn, want aangezien je de prijs van het product al hebt opgehaald (het staat immers al ergens op de pagina) kun je deze waarde direct in je functie echoën.
In principe hetzelfde concept als hier:
http://www.javascriptkit.com/script/cut18.shtml
Alleen zorgt je in jouw geval dat je de cijfer/reken knoppen weglaat op de "="-knop na, en schrijf je in je functie:
var bedrag = '';
(value van input)*bedrag
Je kunt er daarbij met javascript voor zorgen dat men alleen numerieke tekens in het veld kan voeren.
====
EDIT: Even een kijkje nemen naar je nieuwe post, ik reageerde net te vroeg
Gewijzigd op 29/08/2012 22:25:38 door Christopher A
<script type="text/javascript">
var totaalprijs = 0; // Deze variabele bevat de totaalprijs (niet aanpassen)
var prijzen = new Array(); // De array met de prijs en het aantal van het product.
prijzen[0] = new Array(, 0); // De eerste 0 is het id, 2.35 is de prijs van product 0, en 0 het aantal.
prijzen[1] = new Array(1.20, 0); // Bij deze dus alleen de prijs aanpassen.
// Met onchange="update(x, this)" in een input veld kan je dus het aantal in de array prijzen[x] aanpassen.
function update(id, veld) {
if(!veld.value.match(/([0-9]+)/)) {
alert('Vul a.u.b een aantal in.');
veld.value = 0;
} else {
prijzen[id][1] = veld.value;
totaal();
}
}
function totaal() {
totaalprijs = 0;
for (i in prijzen) {
totaalprijs = totaalprijs + (prijzen[0] * prijzen[1]);
}
document.getElementById('prijs').innerHTML = '€ <span>' + totaalprijs + '</span>';
}
</script>
<label><span>Aantal</span>
<select name="prijs" onchange="update(0, this)">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="prijs" id="prijs">€ <span></span></div>
Bedankt allemaal!
Gewijzigd op 29/08/2012 22:36:10 door Christopher A
inderdaad, zo had ik het ook opgelost.
Was te moeilijk aan het denken, deze wordt inderdaad in eerste instantie direct op de website geplaatst.