Waarde optellen

johnpieters · 29 jan 2007

Dank jullie wel!

Hier ben ik een stuk verder mee gekomen!

johnpieters · 30 jan 2007

Nog een vraag!

En.....als ik het gekozen produkt nu wil meegeven in een <FORM>
voor verzending als bestelformulier.

De produktwaarde en prijs doorgeven aan een hiddenveld.

En eigenlijk ook het totaalbedrag doorgeven aan een hiddenveld in een bestelformulier.

Bestaat er eigenlijk een php-script met een vereenvoudigd winkelwagen-script voor bijvoorbeeld 6 produkten en 1 bestelpagina?
Ik heb natuurlijk zelf al gezocht.....maar de meeste zijn niet echt in een verkorte
versie.

Egel · 30 jan 2007

Even het checkbox-value idee van Jeroen geleend:

PHP:

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Winkelwagentje</title>
  <script type="text/javascript">
   function optellen() {
    var f = document.f, totaal = 0;
    for (var i = 0; i < f.item.length; i++) if (f.item[i].checked) totaal += parseFloat(f.item[i].value);
    f.totaal.value = '€ ' + totaal.toFixed(2).replace('.',',');
    };
  </script>
  <style type="text/css">
   body {font: bold 13px Verdana;}
  </style>
 </head>
 <body>
  <form name="f">
   <input type="checkbox" name="item" onclick="optellen()" value=" 1.20 naam 01001"> Product 1 € 1,20<br>
   <input type="checkbox" name="item" onclick="optellen()" value=" 5.00 naam 02002"> Product 2 € 5,-<br>
   <input type="checkbox" name="item" onclick="optellen()" value=" 6.99 naam 03003"> Product 3 € 6,99<br>
   <input type="checkbox" name="item" onclick="optellen()" value=" 0.50 naam 04004"> Product 4 € 0,50<br>
   <input type="checkbox" name="item" onclick="optellen()" value="80.00 naam 05005"> Product 5 € 80,-<br>
   Totaal: <input type="text" name="totaal" readonly>
  </form>
 </body>
</html>

De parseFloat() maakt alleen gebruik van het eerste (getal) gedeelte van de value maar de rest wordt wel mee opgestuurd, zo ook het totaal dat in een readonly text-veld staat.

Als je product 2 & 4 aanvinkt zou het formulier iets als dit moeten opsturen:
item = 5.00 naam 02002
item = 0.50 naam 04004
totaal = € 5,50

Vr.Gr. Egel.

johnpieters · 30 jan 2007

Prachtig!

Goed zeg!

Hier was ik zelf nooit op gekomen. Dank je wel!

johnpieters · 12 feb 2007

Item naam

Inmiddels heb ik het 1 en ander ingebouwd.

Maar helaas bij het versturen van het formulier wordt alleen het laatste item
door gegeven in de variabele.

Dit komt omdat de loop-veld maar 1 naam heeft "item". En de laatste optie van
het veld "item" wordt nu doorgegeven als inhoud van de variabele "item".

Hoe kan ik alle gekozen opties toch door krijgen per formulier?

Alvast bedankt!

johnpieters · 12 feb 2007

Oplossing

Sorry,

De oplossing stond er eigenlijk al:.................

if (f.item1.checked) totaal += parseFloat(f.item1.value);
if (f.item2.checked) totaal += parseFloat(f.item2.value);
if (f.item3.checked) totaal += parseFloat(f.item3.value);

Egel · 13 feb 2007

Ik wist niet dat bij gelijke naam alleen de laatste checkbox opgestuurd zou worden.

Zo blijf je leren!

Dit script gebruikt de elements array:

PHP:

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Winkelwagentje</title>
  <script type="text/javascript">
   function optellen() {
    var f = document.f, e = f.elements, totaal = 0;
    for (var i = 0; i < e.length; i++) if (e[i].type == 'checkbox' && e[i].checked) totaal += parseFloat(e[i].value);
    f.totaal.value = '€ ' + totaal.toFixed(2).replace('.',',');
    };
  </script>
  <style type="text/css">
   body {font: bold 13px Verdana;}
  </style>
 </head>
 <body>
  <form name="f">
   <input type="checkbox" name="item1" onclick="optellen()" value=" 1.20 naam 01001"> Product 1 € 1,20<br>
   <input type="checkbox" name="item2" onclick="optellen()" value=" 5.00 naam 02002"> Product 2 € 5,-<br>
   <input type="checkbox" name="item3" onclick="optellen()" value=" 6.99 naam 03003"> Product 3 € 6,99<br>
   <input type="checkbox" name="item4" onclick="optellen()" value=" 0.50 naam 04004"> Product 4 € 0,50<br>
   <input type="checkbox" name="item5" onclick="optellen()" value="80.00 naam 05005"> Product 5 € 80,-<br>
   Totaal: <input type="text" name="totaal" readonly>
  </form>
 </body>
</html>

zo kun je name en aantal van de checkboxen veranderen zonder het script te hoeven aanpassen.

Vr.Gr. Egel.

johnpieters · 19 feb 2007

BTW-veld en EIND-veld

Kunnen we nog 1 stap verder gaan?

Een extra veld die over het subtotaal een btw-bedrag berekend van 19%.
Waarbij het berekend btw-bedrag in een readonly-veld komt te staan.

En natuurlijk een EIND-bedrag-veld (readonly).

Waarbij het subtotaal + btw = eindbedrag.

Alvast bedankt.

jeroendenoot · 19 feb 2007

Het script met BTW:

HTML:

<html> 
 <head> 
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
  <title>Winkelwagentje</title> 
  <script type="text/javascript"> 
   function optellen() { 
    var f = document.f, e = f.elements, totaal = 0; 
    for (var i = 0; i < e.length; i++) if (e[i].type == 'checkbox' && e[i].checked) totaal += parseFloat(e[i].value); 
    f.subtotaal.value = '€ ' + totaal.toFixed(2).replace('.',',');
	f.btw.value = '€ ' + (totaal * 0.19).toFixed(2).replace('.',',')
	f.totaal.value = '€ ' + (totaal * 1.19).toFixed(2).replace('.',',')
    }; 
  </script> 
  <style type="text/css"> 
   body, td, input {font: bold 13px Verdana;} 
  </style> 
 </head> 
 <body onLoad="optellen()"> 
  <form name="f" method="post"> 
   <input type="checkbox" name="item1" onclick="optellen()" value=" 1.20 naam 01001"> Product 1 € 1,20<br> 
   <input type="checkbox" name="item2" onclick="optellen()" value=" 5.00 naam 02002"> Product 2 € 5,-<br> 
   <input type="checkbox" name="item3" onclick="optellen()" value=" 6.99 naam 03003"> Product 3 € 6,99<br> 
   <input type="checkbox" name="item4" onclick="optellen()" value=" 0.50 naam 04004"> Product 4 € 0,50<br> 
   <input type="checkbox" name="item5" onclick="optellen()" value="80.00 naam 05005"> Product 5 € 80,-<br> 
   <table>
    <tr>
     <td>Subtotaal:</td><td><input type="text" name="subtotaal" readonly></td>
    </tr>
    <tr>
     <td>BTW (19%):</td><td><input type="text" name="btw" readonly></td>
    </tr>
    <tr>
     <td>Totaal:</td><td><input type="text" name="totaal" readonly></td>
    </tr>
   </table>
   <input type="submit" value="Verzenden">
  </form> 
 </body> 
</html>

CasterTroy · 11 apr 2007

Egel zei:

Misschien nog een leuke variatie:

PHP:

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Waarden optellen</title>
  <script type="text/javascript">
   function sumup() {
    var sum = 0;
    for (var i = 0; i < document.f.field.length; i++) sum += parseFloat(document.f.field[i].value);
    document.getElementById("sum").innerHTML = (isNaN(sum) ? 'Geen getal.' : sum);
    };
  </script>
  <style type="text/css">
   body {font: bold 13px Verdana;}
  </style>
 </head>
 <body onload="sumup()">
  <form name="f">
   Veld 1: <input name="field" type="text" size="3" value="0" onkeyup="sumup();"><br>
   Veld 2: <input name="field" type="text" size="3" value="0" onkeyup="sumup();"><br>
   Veld 3: <input name="field" type="text" size="3" value="0" onkeyup="sumup();"><br>
   Veld 4: <input name="field" type="text" size="3" value="0" onkeyup="sumup();"><br>
   Veld 5: <input name="field" type="text" size="3" value="0" onkeyup="sumup();"><br>
   Veld 6: <input name="field" type="text" size="3" value="0" onkeyup="sumup();"><br>
  </form>
  Totaal: <span id="sum"></span>
 </body>
</html>

Het maakt gebruik van het feit dat als je meerdere formuliervelden dezelfde naam geeft dat ze een array vormen. isNaN (is not a number) wordt alleen bij de sum toegepast.

Vr.Gr. Egel.

Beste Egel,

Ik probeer het script dat je hier gepost heb toe te passen binnen mijn applicatie.
Ik stuit echter op één probleem waarvan ik de oplossing nog niet gevonden heb.
Ik zou graag de waardes "field" in het formaat "field[]" willen hebben voor een array in PHP.
Hoe kan ik ervoor zorgen dat dit dan ook werkt? Ik krijg het namelijk niet werken met de brackets .. graag verneem ik een reactie van jou!

jeroendenoot · 11 apr 2007

Ik heb het script een klein beetje aangepast. Nu kun je het formulier verwerken met een PHP-script.

HTML:

<html>
 <head> 
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
  <title>Waarden optellen</title> 
  <script type="text/javascript"> 
   function sumup() { 
    var sum = 0; 
    for (var i = 0; i < document.f.getElementsByTagName("input").length; i++) sum += (document.f.getElementsByTagName("input")[i].getAttribute("type") == "text" ? parseFloat(document.f.getElementsByTagName("input")[i].value) : 0); 
    document.getElementById("sum").innerHTML = (isNaN(sum) ? 'Geen getal.' : sum); 
    }; 
  </script> 
  <style type="text/css"> 
   body {font: bold 13px Verdana;} 
  </style> 
 </head> 
 <body onload="sumup()"> 
  <form name="f"> 
   Veld 1: <input name="field[]" type="text" size="3" value="0" onkeyup="sumup();"><br> 
   Veld 2: <input name="field[]" type="text" size="3" value="0" onkeyup="sumup();"><br> 
   Veld 3: <input name="field[]" type="text" size="3" value="0" onkeyup="sumup();"><br> 
   Veld 4: <input name="field[]" type="text" size="3" value="0" onkeyup="sumup();"><br> 
   Veld 5: <input name="field[]" type="text" size="3" value="0" onkeyup="sumup();"><br> 
   Veld 6: <input name="field[]" type="text" size="3" value="0" onkeyup="sumup();"><br> 
   <input type="submit" value="Verzenden">
  </form> 
  Totaal: <span id="sum"></span> 
 </body> 
</html>

CasterTroy · 11 apr 2007

Dank je Jeroen!
Kan ik weer verder!!!

forced reg · 25 mrt 2009

Totaal in een formulierveld

Hallo Allemaal,

Ik gebruik dit script al enige tijd en ben er dus ook lekker mee aan het pielen....

Het enige waar ik maar niet uit kom is het volgende:

Is het mogelijk om deze code : <span id="sum"></span> te vervangen door een formulierveld waarin het totaal te zien is? Op die manier zou ik het mee kunnen sturen met een formulier. Heb hier ook iets gelezen om deze waarde hidden te maken, maar daar komt deze pannekoek ook niet uit.

Zoals mijn moeder altijd al zei: "Iedereen is dom, maar dan wel op zijn eigen gebied"

Hoop dat iemand mij hiermee kan helpen.

Groeten,
Hans

ErikBooy007 · 25 mrt 2009

Ja, dat kan:

Je zet een inputveld in je formulier (al dan niet hidden):

HTML:

<input type="text" id="sum" name="sum" value="" />

Dan maak je in het script van:

HTML:

document.getElementById("sum").innerHTML = (isNaN(sum) ? 'Geen getal.' : sum);

HTML:

document.getElementById("sum").value = (isNaN(sum) ? 'Geen getal.' : sum);

Moet je wel de span met die ID weghalen.

forced reg · 25 mrt 2009

Ja hoor, volle bingokaart ;-)

Te gek, werkt prima,

bedankt voor de snelle hulp

Bertus Bolknak · 14 nov 2009

Hallo Jeroen, ja ik ben net lid van het forum en dit is mijn eerste posting/reactie op een vraag. Ik pleeg meteen 2 zonden, want ik mag niet op een andermans vraag inbreken en ik mag oude threads geen schop geven, las ik in de voorwaarden. Hopen maar dus dat dit goed gevonden wordt. Ik denk zelf dat dit de meest forum-vriendelijke manier is om mijn probleempje duidelijk te maken, en ik vond het nogal onnodig om hier een apart draadje voor te openen. Deze thread is een prachtig begin. Affijn ter zake, ik ben eigenlijk op zoek naar precies dezelfde funtionaliteit als in jouw script. Echter ik heb er een bugje in ontdekt, waardoor het helaas voor mij onbruikbaar is (ik heb zelf niet veel verstand van Javascript). Dit is denk ik de bug: Als ik een vinkje aanzet dan telt het totaal op. So far so good. Echter als ik dan een browser-window refresh doe, dan springt het totaalbedrag wel terug naar 0, maar de vinkjes blijven aan. Als ik daarna een vinkje uitzet dan komt er bij het totaalbedrag een negatief getal te staan. Kan je het zo maken dat bij een refresh de situatie in tact blijft, zoals ie was. Dat de webpagina dus eigenlijk niet reageert op een browser-refresh? Of in ieder geval zodanig dat de relatie aangevinkte bedragen enerzijds ten alle tijden klopt met het totaalbedrag?

Groeten, Bert Groeneveld.

jeroendenoot zei:

Dat is mogelijk ja. Ik heb even iets gemaakt, ik hoop dat je het zo ongeveer bedoelt.

HTML:

<!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=iso-8859-1" />
<title>Waarden optellen</title>
<script>

var total = 0;
function update(checkbox){
	if(checkbox.checked){
		total += parseFloat(checkbox.value);
	} else {
		total -= parseFloat(checkbox.value);
	};
	document.getElementById("total").innerHTML = "€ " + total.toFixed(2).replace(".", ",");
};

</script>
</head>
<body>
<table>
<tr><td width="30"></td><td width="200"><b>Product</b></td><td width="100"><b>Prijs</b></td></tr>
<tr><td><input type="checkbox" value="1.2" onclick="update(this);" /> </td><td>Product 1</td><td>€ 1,20</td></tr>
<tr><td><input type="checkbox" value="5" onclick="update(this);" />   </td><td>Product 2</td><td>€ 5,-</td></tr>
<tr><td><input type="checkbox" value="6.99" onclick="update(this);" /></td><td>Product 3</td><td>€ 6,99</td></tr>
<tr><td><input type="checkbox" value="0.5" onclick="update(this);" /> </td><td>Product 4</td><td>€ 0,50</td></tr>
<tr><td><input type="checkbox" value="80" onclick="update(this);" />  </td><td>Product 5</td><td>€ 80,-</td></tr>
<tr><td></td><td><b>Totaal:</b></td><td id="total">€ 0,00</td></tr>
</table>
</body>
</html>

KwarK · 14 nov 2009

Je doet het heel netjes moet ik zeggen, dus ik laat hem staan

en welkom!

Welke browser gebruik je? De vinkjes zouden eigenlijk net als de ingevoerde waarden "vergeten" moeten worden.

Meer ontopic: in plaats van steeds van het al berekende totaal uit te gaan lijkt het me beter om het totaal helemaal nieuw te berekenen. Dus, even in woorden, om bij elke keer dat er een vinkje verandert weer helemaal opnieuw te checken welke bedragen er aangevinkt zijn en dan die bij elkaar op te tellen. Krijg je dat voor mekaar denk je?

edit -- ik heb je opmerking "ik heb zelf niet veel verstand van Javascript" even over het hoofd gezien, maar ik zal straks wat fabriceren

Bertus Bolknak · 14 nov 2009

Hallo Forced Reg,
Het optel scriptje waar jij mee werkt, heeft dat in het totaal veld altijd twee decimalen? Ook bij 20,00 of bij 29,90? Omdat het bij mij om bedragen gaat moet dat eigenlijk wel. Hoe kan ik dat voor elkaar krijgen?

Groeten Bert Groeneveld.

forced reg zei:
Te gek, werkt prima,

bedankt voor de snelle hulp

Bertus Bolknak · 14 nov 2009

Goh, wat een snelle reactie. En bedankt voor het warme welkom. Even een beetje over mezelf: ik vul mijn dagen met Applescripten. Ik werk op een reclamebureau en stuur o.a. Adobe InDesign aan met een Applescript. Maar het is tegelijkertijd ook een beetje een hobby/verslaving. Nu heb ik in mijn kop om in mijn vrije tijd ook Javascript te gaan leren. Maar dat is wel moeilijker dan Applescript (meer onthouden en zo). Affijn, je snapt het al ik zit in Firefox op de Mac. Ik heb inderdaad niet gekeken of het in Explorer op Windows ook een bug is. Zal ik gelijk even het doel scherp stellen wat ik voor ogen heb met dat Javascriptje? Hier komt het:
Een rijtje bedragen onder elkaar (bedragen bepaal ik zelf dus textfields kunnen readonly zijn), met voor elk bedrag een vinkje. Als ik dat vinkje aanzet dan verhoogt automatisch het totaal. Het gaat om geldbedragen, dus altijd 2 decimalen, ook als het een rond bedrag is (bijv. 20,00). Alles in een form, ook het totaal, want het geheel moet verstuurd kunnen worden. Als het kan cross-browser-proof en bug-free. Ik heb al heel wat scriptjes gezien op het forum, en dan met name in deze thread, maar nog geen enkele was 100% zoals ik hem graag wou hebben. Zou geweldig zijn, als iemand mij ermee kon helpen, want op dit moment kom ik er zelf nog niet uit.

Groeten Bert.

KwarK zei:
Je doet het heel netjes moet ik zeggen, dus ik laat hem staan en welkom!

Welke browser gebruik je? De vinkjes zouden eigenlijk net als de ingevoerde waarden "vergeten" moeten worden.

Meer ontopic: in plaats van steeds van het al berekende totaal uit te gaan lijkt het me beter om het totaal helemaal nieuw te berekenen. Dus, even in woorden, om bij elke keer dat er een vinkje verandert weer helemaal opnieuw te checken welke bedragen er aangevinkt zijn en dan die bij elkaar op te tellen. Krijg je dat voor mekaar denk je?

edit -- ik heb je opmerking "ik heb zelf niet veel verstand van Javascript" even over het hoofd gezien, maar ik zal straks wat fabriceren

KwarK · 14 nov 2009

HTML:

<!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=iso-8859-1" />
<title>Waarden optellen</title>
<script>
<!--
  function update() {
      var total = 0; // teller resetten
      var input = document.getElementsByTagName("input"); // alle inputvelden verzamelen
      for (var i = 0; i < input.length; i++) {
        total += input[i].checked ? parseFloat(input[i].getAttribute("value")) : 0; // waarden van aangevinkte checkboxen optellen
      }
      document.getElementById("total").innerHTML = "€ " + total.toFixed(2).replace(".", ","); // netjes met komma weergeven
  };
-->
</script>
</head>
<body>
<table>
  <tr><td width="30"></td><td width="200"><b>Product</b></td><td width="100"><b>Prijs</b></td></tr>
  <tr><td><input type="checkbox" value="1.2" onclick="update();" /> </td><td>Product 1</td><td>€ 1,20</td></tr>
  <tr><td><input type="checkbox" value="5" onclick="update();" /></td><td>Product 2</td><td>€ 5,-</td></tr>
  <tr><td><input type="checkbox" value="6.99" onclick="update();" /></td><td>Product 3</td><td>€ 6,99</td></tr>
  <tr><td><input type="checkbox" value="0.5" onclick="update();" /></td><td>Product 4</td><td>€ 0,50</td></tr>
  <tr><td><input type="checkbox" value="80" onclick="update();" /></td><td>Product 5</td><td>€ 80,-</td></tr>
  <tr><td></td><td><b>Totaal:</b></td><td id="total">€ 0,00</td></tr>
</table>
</body>
</html>

Van Applescript weet ik dan weer helemaal niks, dus mocht ik daarmee ooit hulp nodig hebben dan weet ik je te vinden

Waarde optellen

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Nieuwe gebruiker

Terugkerende gebruiker

Nieuwe gebruiker

Gebruiker

Gebruiker

Gebruiker

Wij waarderen jouw privacy