Waarde optellen

  • Onderwerp starter Onderwerp starter eww
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
Hallo KwarK, bedankt. Van dat Applescript is OK hoor! Ik heb het Javascriptje nu getest met zowel Internet Explorer als Firefox. Zelfde gedrag in beide browsers. Geen negatieve getallen meer, dus dat werkt. Nog één klein bugje dacht ik: Het gaat om wat er gebeurt bij het refreshen van de browser. Het totaalbedrag wordt dan gereset naar 0. Dat is mooi. Maar de V-tjes worden niet gewist. En ik mis trouwens de form-tags, zodat ik straks het geheel kan versturen. Ik weet niet of ik er die zo straffeloos omheen kan zetten?

Groeten Bert.

KwarK zei:
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 :D
Klik om te vergroten...
 
Oke, dat die vinkjes blijven staan moet haast iets van Apple zijn dan; onder Windows krijg ik dat zowel onder Opera als Firefox als IE niet voor mekaar. Ik heb desondanks een stukje ingebouwd dat het zou moeten fixen.

Verder heb ik nu een verborgen invoervak toegevoegd met daarin het totaal, maar dan zonder verdere opmaak (geen €-teken, decimalen met . aangegeven); deze ook met form-tags en verzend-knop, verder naar wens aan te passen.

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 input = document.getElementsByTagName("input"); // alle inputvelden verzamelen

  function update() {
      var total = 0; // teller resetten
      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
      document.getElementById("total_hidden").value = total.toFixed(2);
  };

  function init() {
      for (var i = 0; i < input.length; i++) {
        input[i].checked = false;
      }
  }
-->
</script>
</head>
<body onload="init();">
<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>
<form><input id="total_hidden" name="total" type="hidden" value="0" /> <input type="Submit" value="Verzenden" /></form>
</body>
</html>
 
Helemaal geweldig zeg! Nu werkt het perfekt! Trouwens, nog even terugkomend op die vorige versie, met dat refresh-probleem dat ik had en jij niet. Ik heb dit wel 3x getest op Windows, zowel IE als FF. Dan kan het alleen nog maar aan de versie van de browser liggen. IE is bij mij versie 8 en Firefox versie 3.5.3. Beide browsers hebben (bij de vorige versie van het script; nu niet meer dus) het verschijnsel dat bij verversen van de pagina de totaalwaarde gereset wordt naar 0, maar de vinkjes blijven staan. Affijn, dit heb je gelukkig sowieso gefixt, dus dat probleem is mooi niet meer aan de orde.
Over het versturen: Het is eigenlijk de bedoeling dat ALLE informatie uiteindelijk meegestuurd gaat worden, dus ook al die veldnamen met de bedragen, maar daar kom ik vast zelf wel uit. Volgens mij kan ik gewoon die form openings tag boven de table openings tag zetten, en het zal werken, toch? Anyway; Ik ben blij dat ik dit forum gevonden heb, maar ja er moet ook maar net iemand zijn die je (op een zaterdag-avond!) even wil helpen. Dat heb je gedaan. Dus hartelijk bedankt daarvoor. Ik kan er verder mee aan de slag.

Groeten (uit Zaltbommel), Bert Groeneveld.

KwarK zei:
Oke, dat die vinkjes blijven staan moet haast iets van Apple zijn dan; onder Windows krijg ik dat zowel onder Opera als Firefox als IE niet voor mekaar. Ik heb desondanks een stukje ingebouwd dat het zou moeten fixen.

Verder heb ik nu een verborgen invoervak toegevoegd met daarin het totaal, maar dan zonder verdere opmaak (geen €-teken, decimalen met . aangegeven); deze ook met form-tags en verzend-knop, verder naar wens aan te passen.

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 input = document.getElementsByTagName("input"); // alle inputvelden verzamelen

  function update() {
      var total = 0; // teller resetten
      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
      document.getElementById("total_hidden").value = total.toFixed(2);
  };

  function init() {
      for (var i = 0; i < input.length; i++) {
        input[i].checked = false;
      }
  }
-->
</script>
</head>
<body onload="init();">
<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>
<form><input id="total_hidden" name="total" type="hidden" value="0" /> <input type="Submit" value="Verzenden" /></form>
</body>
</html>
Klik om te vergroten...
 
Hallo allemaal,

Ik ben bezig om twee optellingen op 1 pagina te maken, alleen dit wil nog niet lukken.
Daarom hoop ik dat iemand van jullie mij hiermee kan helpen.
Ik heb het voorgaande (van lang geleden) gekopieerd en aangepast.
Kan iemand mij vertellen wat ik fout doe.

HTML: 
<HTML>
<HEAD>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<TITLE>Bestelformulier</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>

<script type="text/javascript">
<!--
function sumup(){
    var sum = 0;
    if(!isNaN(parseInt(document.getElementById("field1").value))){
        sum += parseInt(document.getElementById("field1").value);
    };
    if(!isNaN(parseInt(document.getElementById("field2").value))){
        sum += parseInt(document.getElementById("field2").value);
    };
    if(!isNaN(parseInt(document.getElementById("field3").value))){
        sum += parseInt(document.getElementById("field3").value);
    };
        if(!isNaN(parseInt(document.getElementById("field4").value))){
        sum += parseInt(document.getElementById("field4").value);
    };
    if(!isNaN(parseInt(document.getElementById("field5").value))){
        sum += parseInt(document.getElementById("field5").value);
    };

    document.getElementById("sum").innerHTML = sum;
};
 
 
 <script type="text/javascript">
<!--
function sumup0(){
    var sum0 = 0;
    if(!isNaN(parseInt(document.getElementById("field6").value))){
        sum0 += parseInt(document.getElementById("field6").value);
    };
    if(!isNaN(parseInt(document.getElementById("field7").value))){
        sum0 += parseInt(document.getElementById("field7").value);
    };
    if(!isNaN(parseInt(document.getElementById("field8").value))){
        sum0 += parseInt(document.getElementById("field8").value);
    };
        if(!isNaN(parseInt(document.getElementById("field9").value))){
        sum0 += parseInt(document.getElementById("field9").value);
    };
    if(!isNaN(parseInt(document.getElementById("field10").value))){
        sum0 += parseInt(document.getElementById("field10").value);
    };

    document.getElementById("sum0").innerHTML = sum0;
};
 
//-->
</script>

</HEAD>

<BODY text="#000080">
<FORM>
								
								<TABLE width="491" height="176" cellspacing="0" cellpadding="0">
									<TR>
										<TD>
										<font color="#000080" face="Century Gothic">
										<strong>OMSCHRIJVING/ NUMMER</strong></font></TD>
										<TD width="62" align="left">
										<font color="#000080" face="Century Gothic">
										<strong>AANTAL</strong></font></TD>
										<TD width="8">&nbsp;</TD>
										<TD width="40"><b>
										<font face="Century Gothic" color="#000080">PRIJS</font></b></TD>
										<TD width="22">&nbsp;</TD>
									</TR>
									<TR>
										<TD>
										<font face="Century Gothic" color="#000080">
										<INPUT NAME="Ordering_OrderDesc0" SIZE=50></font></TD>
										<TD width="62" align="center">
										<font face="Century Gothic" color="#000080">
										<INPUT NAME="Ordering_OrderQty0" SIZE=4 MAXLENGTH=6></font></TD>
										<TD width="8">€</TD>
										<TD width="40">
										<input id="field1" size="4" onkeyup="sumup();" name="Artikel1" />,</TD>
										<TD width="22">
										<input id="field6" size="2" onkeyup="sumup0();" name="Artikel1d" /></TD>
									</TR>
									<TR>
										<TD height="26">
										<font face="Century Gothic" color="#000080">
										<INPUT TYPE=TEXT NAME="Ordering_OrderDesc1" SIZE=50></font></TD>
										<TD width="62" height="26" align="center">
										<font face="Century Gothic" color="#000080">
										<INPUT NAME="Ordering_OrderQty1" SIZE=4 MAXLENGTH=6></font></TD>
										<TD width="8" height="26">€</TD>
										<TD width="40" height="26">
										<input id="field2" size="4" onkeyup="sumup();" name="Artikel2" />,</TD>
										<TD width="22" height="26">
										<input id="field7" size="2" onkeyup="sumup0();" name="Artikel2d" /></TD>
									</TR>
									<TR>
										<TD height="25">
										<font face="Century Gothic" color="#000080">
										<INPUT NAME="Ordering_OrderDesc2" SIZE=50></font></TD>
										<TD height="25" width="62" align="center">
										<font face="Century Gothic" color="#000080">
										<INPUT NAME="Ordering_OrderQty2" SIZE=4 MAXLENGTH=6></font></TD>
										<TD height="25" width="8">€</TD>
										<TD height="25" width="40">
										<input id="field3" size="4" onkeyup="sumup();" name="Artikel3" />,</TD>
										<TD height="25" width="22">
										<input id="field8" size="2" onkeyup="sumup0();" name="Artike3d" /></TD>
									</TR>
									<TR>
										<TD height="25">
										<font face="Century Gothic" color="#000080">
										<INPUT TYPE=TEXT NAME="Ordering_OrderDesc3" SIZE=50></font></TD>
										<TD width="62" height="25" align="center">
										<font face="Century Gothic" color="#000080">
										<INPUT NAME="Ordering_OrderQty3" SIZE=4 MAXLENGTH=6></font></TD>
										<TD width="8" height="25">€</TD>
										<TD width="40" height="25">
										<input id="field4" size="4" onkeyup="sumup();" name="Artikel4" />,</TD>
										<TD width="22" height="25">
										<input id="field9" size="2" onkeyup="sumup0();" name="Artikel4d" /></TD>
									</TR>
									<TR>
										<TD height="26">
										<font face="Century Gothic" color="#000080">
										<INPUT TYPE=TEXT NAME="Ordering_OrderDesc4" SIZE=50></font></TD>
										<TD width="62" align="center" height="26">
										<font face="Century Gothic" color="#000080">
										<INPUT NAME="Ordering_OrderQty4" SIZE=4 MAXLENGTH=6></font></TD>
										<TD width="8" height="26">€</TD>
										<TD width="40" height="26">
										<input id="field5" size="4" onkeyup="sumup();" name="Artikel5" />,</TD>
										<TD width="22" height="26">
										<input id="field10" size="2" onkeyup="sumup0();" name="Artikel5d" /></TD>
									</TR>
									<TR>
										<TD>
										<p align="right">TOTAAL:&nbsp;&nbsp;&nbsp;
										</TD>
										<TD width="62" align="left">&nbsp;</TD>
										<TD width="8">€</TD>
										<TD width="40">
										<span id="sum"></span></TD>
										<TD width="22">
										<span id="sum0"></span></TD>
									</TR>
								</TABLE>
	
</FORM>
</BODY>
</HTML>

Alvast bedankt voor de hulp.

groeten,
Mofert1984
 
Mofert, welkom op Helpmij! Mooi bouwjaar, 1984 :D

Ik snap wat je wil doen en je idee is goed. Wel is het (vooral voor de leesbaarheid) verstandig om accolades {} te gebruiken bij if-statements en for-loops, zo is het makkelijker om foutjes te herkennen. Hier heb ik dat gedaan voor je, en toen was het probleem al verholpen:

HTML: 
<HTML>
<HEAD>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<TITLE>Bestelformulier</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('.',',');
    }
  }
}

function sumup(){
    var sum = 0;
    if(!isNaN(parseInt(document.getElementById("field1").value))){
        sum += parseInt(document.getElementById("field1").value);
    };
    if(!isNaN(parseInt(document.getElementById("field2").value))){
        sum += parseInt(document.getElementById("field2").value);
    };
    if(!isNaN(parseInt(document.getElementById("field3").value))){
        sum += parseInt(document.getElementById("field3").value);
    };
        if(!isNaN(parseInt(document.getElementById("field4").value))){
        sum += parseInt(document.getElementById("field4").value);
    };
    if(!isNaN(parseInt(document.getElementById("field5").value))){
        sum += parseInt(document.getElementById("field5").value);
    };
 
    document.getElementById("sum").innerHTML = sum;
};

function sumup0(){
    var sum0 = 0;
    if(!isNaN(parseInt(document.getElementById("field6").value))){
        sum0 += parseInt(document.getElementById("field6").value);
    };
    if(!isNaN(parseInt(document.getElementById("field7").value))){
        sum0 += parseInt(document.getElementById("field7").value);
    };
    if(!isNaN(parseInt(document.getElementById("field8").value))){
        sum0 += parseInt(document.getElementById("field8").value);
    };
        if(!isNaN(parseInt(document.getElementById("field9").value))){
        sum0 += parseInt(document.getElementById("field9").value);
    };
    if(!isNaN(parseInt(document.getElementById("field10").value))){
        sum0 += parseInt(document.getElementById("field10").value);
    };
 
    document.getElementById("sum0").innerHTML = sum0;
};
 
//-->
</script>
 
</HEAD>
 
<BODY text="#000080">
<FORM>
                                
  <TABLE width="491" height="176" cellspacing="0" cellpadding="0">
      <TR>
          <TD>
          <font color="#000080" face="Century Gothic">
          <strong>OMSCHRIJVING/ NUMMER</strong></font></TD>
          <TD width="62" align="left">
          <font color="#000080" face="Century Gothic">
          <strong>AANTAL</strong></font></TD>
          <TD width="8">&nbsp;</TD>
          <TD width="40"><b>
          <font face="Century Gothic" color="#000080">PRIJS</font></b></TD>
          <TD width="22">&nbsp;</TD>
      </TR>
      <TR>
          <TD>
          <font face="Century Gothic" color="#000080">
          <INPUT NAME="Ordering_OrderDesc0" SIZE=50></font></TD>
          <TD width="62" align="center">
          <font face="Century Gothic" color="#000080">
          <INPUT NAME="Ordering_OrderQty0" SIZE=4 MAXLENGTH=6></font></TD>
          <TD width="8">€</TD>
          <TD width="40">
          <input id="field1" size="4" onkeyup="sumup();" name="Artikel1" />,</TD>
          <TD width="22">
          <input id="field6" size="2" onkeyup="sumup0();" name="Artikel1d" /></TD>
      </TR>
      <TR>
          <TD height="26">
          <font face="Century Gothic" color="#000080">
          <INPUT TYPE=TEXT NAME="Ordering_OrderDesc1" SIZE=50></font></TD>
          <TD width="62" height="26" align="center">
          <font face="Century Gothic" color="#000080">
          <INPUT NAME="Ordering_OrderQty1" SIZE=4 MAXLENGTH=6></font></TD>
          <TD width="8" height="26">€</TD>
          <TD width="40" height="26">
          <input id="field2" size="4" onkeyup="sumup();" name="Artikel2" />,</TD>
          <TD width="22" height="26">
          <input id="field7" size="2" onkeyup="sumup0();" name="Artikel2d" /></TD>
      </TR>
      <TR>
          <TD height="25">
          <font face="Century Gothic" color="#000080">
          <INPUT NAME="Ordering_OrderDesc2" SIZE=50></font></TD>
          <TD height="25" width="62" align="center">
          <font face="Century Gothic" color="#000080">
          <INPUT NAME="Ordering_OrderQty2" SIZE=4 MAXLENGTH=6></font></TD>
          <TD height="25" width="8">€</TD>
          <TD height="25" width="40">
          <input id="field3" size="4" onkeyup="sumup();" name="Artikel3" />,</TD>
          <TD height="25" width="22">
          <input id="field8" size="2" onkeyup="sumup0();" name="Artike3d" /></TD>
      </TR>
      <TR>
          <TD height="25">
          <font face="Century Gothic" color="#000080">
          <INPUT TYPE=TEXT NAME="Ordering_OrderDesc3" SIZE=50></font></TD>
          <TD width="62" height="25" align="center">
          <font face="Century Gothic" color="#000080">
          <INPUT NAME="Ordering_OrderQty3" SIZE=4 MAXLENGTH=6></font></TD>
          <TD width="8" height="25">€</TD>
          <TD width="40" height="25">
          <input id="field4" size="4" onkeyup="sumup();" name="Artikel4" />,</TD>
          <TD width="22" height="25">
          <input id="field9" size="2" onkeyup="sumup0();" name="Artikel4d" /></TD>
      </TR>
      <TR>
          <TD height="26">
          <font face="Century Gothic" color="#000080">
          <INPUT TYPE=TEXT NAME="Ordering_OrderDesc4" SIZE=50></font></TD>
          <TD width="62" align="center" height="26">
          <font face="Century Gothic" color="#000080">
          <INPUT NAME="Ordering_OrderQty4" SIZE=4 MAXLENGTH=6></font></TD>
          <TD width="8" height="26">€</TD>
          <TD width="40" height="26">
          <input id="field5" size="4" onkeyup="sumup();" name="Artikel5" />,</TD>
          <TD width="22" height="26">
          <input id="field10" size="2" onkeyup="sumup0();" name="Artikel5d" /></TD>
      </TR>
      <TR>
          <TD>
          <p align="right">TOTAAL:&nbsp;&nbsp;&nbsp;
          </TD>
          <TD width="62" align="left">&nbsp;</TD>
          <TD width="8">€</TD>
          <TD width="40">
          <span id="sum"></span></TD>
          <TD width="22">
          <span id="sum0"></span></TD>
      </TR>
  </TABLE>
    
</FORM>
</BODY>
</HTML>

Maar je ziet wat over het hoofd:

attachment.php
;)
 

Bijlagen

  • js.gif
    js.gif
    3,4 KB · Weergaven: 108
Heej KwarK,

Dank je voor de tip!
Heb jij misschien een manier waarop dit wel gaat lukken, aan dit probleem had ik inderdaad nog niet gedacht.
Misschien weet jij wel een nog makkelijkere oplossing waarbij maar 1 vak wordt gebruikt.
En als je dan ook nog wat weet om de aantallen erbij te betrekken zou ik het helemaal fantastisch vinden.
Heb al heel wat afgezocht op internet maar nog niets gevonden wat in de buurt komt.
We zullen maar zeggen aldoende leert men;).

Groeten,

Mofert
 
Laatst bewerkt:
Kan je me een beetje context geven? Met andere woorden: wat wil je? Als ik je formulier zo zie wil je een soort bestellijst opzetten, maar de gebruiker (de "klant") moet helemaal zelf artikelnummers of -beschrijvingen ingeven en vervolgens ook nog de prijs. Het lijkt mij logischer om dan een vaste lijst met artikelen te geven waaruit de klant kan kiezen, waarbij na selectie automatisch het waardeveld wordt ingevuld en de klant dan alleen nog het aantal-veld kan aanpassen.
 
Kan iemand me misschien zeggen hoe ik bovenstaande code (met de aanvinkhokjes) kan aanpassen om ook nog aantallen erbij te gebruiken.
Zodat ik bijvoorbeeld, product 1 aantal=2 en product 4 aantal=3 enz. kan aangeven en dat dan een totaal hokje achter de prijs (dus aantalxprijs).
Dat dan onderaan weer een totaal opleverd.

Groet,

Mofert
 
Laatst bewerkt:
Hallo samen,

Ik heb inmiddels wat gespeeld met mijn formulier, ik krijg het alleen niet werkend.
Ik zou graag nog hebben dat het PRIJS vakje niet bewerkt kan worden door de gebruiker.
En een totaal kunnen maken rechtsonder.
Ook werkt de berekening niet helemaal.
Ik weet dat ik veel vraag maar heb al vanalles geprobeerd en kom er niet meer uit.
De checkbox methode werkt voor mij niet omdat ik met aantallen moet werken.

Groet,

Mofert1984

HTML: 
<html>

<head>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>

<script type="text/javascript">
<!--

function bereken ( ) 
{ var getal_1 = document.getElementById( 'pers' ).value;
  var getal_2 = document.getElementById( 'persg' ).value;  
   document.getElementById( 'tot' ).value = getal_1 * getal_2;}

{ var getal_1 = document.getElementById( 'pers0' ).value;
  var getal_2 = document.getElementById( 'persg0' ).value;  
   document.getElementById( 'tot0' ).value = getal_1 * getal_2;}

//-->
</script> 
</head>

<body style="text-align: center">

<address align="center"><span style="font-style: normal; font-weight: 700">
	<font face="Century Gothic" size="6">BESTELFORMULIER</font></span></address>
<address>&nbsp;</address>
<address align="center"><font color="#000080" face="Century Gothic">
	<span style="font-style: normal; font-weight: 700; text-decoration:underline">Vul 
	het onderstaand formulier volledig in voor bestellingen:</span></font></address>
<address align="center">&nbsp;</address>
<TABLE width="491" height="175" cellspacing="0" cellpadding="0">
	<TR>
		<TD align="center"><font color="#000080" face="Century Gothic"><strong>OMSCHRIJVING/ 
			NUMMER</strong></font></TD>
		<TD width="62" align="center">
		<font color="#000080" face="Century Gothic"><strong>AANTAL</strong></font></TD>
		<TD width="8" align="center">&nbsp;</TD>
		<TD width="40" align="center"><b>
		<font face="Century Gothic" color="#000080">PRIJS</font></b></TD>
		<TD width="22" align="center">Sub</TD>
	</TR>
	<TR>
		<TD align="center">Product1</TD>
		<TD width="62" align="center">
		<input type="text" name="pers" id="pers" onblur="bereken()" size="7" /></TD>
		<TD width="8" align="center">€</TD>
		<TD width="40" align="center">
		<input type="text" name="persg" id="persg" onblur="bereken()" value="2.50" size="7"></TD>
		<TD width="22" align="center">
		<input type="text" name="tot" id="tot" value=""></TD>
	</TR>
	<TR>
		<TD height="26" align="center">Product2</TD>
		<TD width="62" height="26" align="center">
		<input type="text" name="pers0" id="pers0" onblur="bereken()" size="7" /></TD>
		<TD width="8" height="26" align="center">€</TD>
		<TD width="40" height="26" align="center">
		<input type="text" name="persg0" id="persg0" onblur="bereken()" value="3.00" size="7"></TD>
		<TD width="22" height="26" align="center">
		<input type="text" name="tot0" id="tot0" value=""></TD>
	</TR>
	<TR>
		<TD height="25" align="center">Product3</TD>
		<TD height="25" width="62" align="center">&nbsp;</TD>
		<TD height="25" width="8" align="center">€</TD>
		<TD height="25" width="40" align="center">&nbsp;</TD>
		<TD height="25" width="22" align="center">&nbsp;</TD>
	</TR>
	<TR>
		<TD height="24" align="center">Product4</TD>
		<TD width="62" height="24" align="center">&nbsp;</TD>
		<TD width="8" height="24" align="center">€</TD>
		<TD width="40" height="24" align="center">&nbsp;</TD>
		<TD width="22" height="24" align="center">&nbsp;</TD>
	</TR>
	<TR>
		<TD height="24" align="center">Product5</TD>
		<TD width="62" align="center" height="24">&nbsp;</TD>
		<TD width="8" height="24" align="center">€</TD>
		<TD width="40" height="24" align="center">&nbsp;</TD>
		<TD width="22" height="24" align="center">&nbsp;</TD>
	</TR>
	<TR>
		<TD align="center">
		<p align="right">TOTAAL:&nbsp;&nbsp;&nbsp; </TD>
		<TD width="62" align="center">&nbsp;</TD>
		<TD width="8" align="center">€</TD>
		<TD width="40" align="center"><span id="sum"></span></TD>
		<TD width="22" align="center"><span id="sum0"></span></TD>
	</TR>
</TABLE>
<P></P>
<P></P>
<TABLE>
	<TR>
		<TD></TD>
		<TD><font color="#000080" face="Century Gothic"><strong>CONTACTGEGEVENS</strong></font></TD>
	</TR>
	<TR>
		<TD ALIGN="right"><font color="#000080" face="Century Gothic"><i>Naam</i></font></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Naam" SIZE=35></font></TD>
	</TR>
	<TR>
		<TD ALIGN="right"><font color="#000080" face="Century Gothic"><em>Straatnaam</em></font></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Straat" SIZE=35> </font></TD>
	</TR>
	<TR>
		<TD ALIGN="right"><font color="#000080" face="Century Gothic"><em>Nummer</em></font></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Nummer" SIZE=8> </font></TD>
	</TR>
	<TR>
		<TD ALIGN="right"><font color="#000080" face="Century Gothic"><em>Woonplaats</em></font></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Plaatsnaam" SIZE=35> </font></TD>
	</TR>
	<TR>
		<TD ALIGN="right"><font color="#000080" face="Century Gothic"><em>Postcode</em></font></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Postcode" SIZE=8 MAXLENGTH=12> </font></TD>
	</TR>
	<TR>
		<TD ALIGN="right"><font color="#000080" face="Century Gothic"><em>Land</em></font></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Land" SIZE=35 value="Nederland"> </font></TD>
	</TR>
	<tr>
		<TD ALIGN="right"><font color="#000080" face="Century Gothic"><i>Telefoonnummer</i></font></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Telefoonnummer" SIZE=35></font></TD>
	</tr>
	<TR>
		<TD ALIGN="right"><i><font face="Century Gothic" color="#000080">E-Mail</font></i></TD>
		<TD><font face="Century Gothic" color="#000080">
		<INPUT NAME="Email" SIZE=35></font></TD>
	</TR>
</TABLE>
<address><span style="font-style: normal; font-family:Century Gothic">
	<INPUT TYPE=submit VALUE="Bestellen" name="Bestellen" style="font-family: Century Gothic" >&nbsp;&nbsp;&nbsp;
									<font face="Century Gothic">
	<INPUT TYPE=reset VALUE="Reset" name="Reset"></font></span></address>
<address><span style="font-style: normal"><font face="Century Gothic" size="1">Bestellingen worden te allen tijde bevestigd.</font></span></address>

</body>

</html>
 
Laatst bewerkt:
Ok, als ik het goed begrijp zijn er vijf verschillende producten te bestellen en wil je dat de klant alleen ingeeft hoeveel van elk hij (of zij :p) er wil bestellen. Naast een subtotaal per product komt er dan ook een eindtotaal. Zie ik dat goed?
 
Heej KwarK,

Het bestelformulier is voor een motorwinkel.
Dus zullen we veel meer dan 5 producten hebben maar heb om te beginnen maar 5 producten erop gezet. Het gaat er idd om dat de klant de aantallen invult en dat we dan een mailtje krijgen wat er besteld is. waarop dan idd voor de duidelijkheid van de klant en ons de sub en eindtotaal automatisch berekend zijn.
Ik hoop dat het een beetje duidelijk is wat de bedoeling is.

Groeten,

Mofert1984
 
In dat geval lijkt het me verstandig eerst één en ander te overwegen voordat je verder gaat. Want je kan weliswaar alle producten in je javascript inprogrammeren (en gegarandeerd dat je zo ook een voor de bezoeker prima werkend systeem krijgt), maar dat zal lastig werken met het updaten van de prijslijst en weinig flexibel zijn qua uitbouwmogelijkheden (ik denk aan features als een "winkelwagen", zoals je die in toch wel elke webwinkel tegenkomt vandaag de dag). Me dunkt dat je daarom beter met een database kan gaan werken en dan met een server-side programmeertaal als PHP of ASP automatisch zo'n formulier opbouwt in plaats van handmatig.

Dat zou een prachtig project zijn als je al wat ervaring hebt met dat soort programmeerwerk, maar ik vermoed dat je nog niet helemaal zo ver bent, en dan zou ik toch neigen naar een "voorgebakken" winkelsysteem (waarbij je dan natuurlijk wel gewoon naar hartelust met templates zou kunnen gaan knutselen om het er allemaal zoals gewenst uit te laten zien). Moet ik gelijk eerlijk toegeven dat ik niet zo bekend ben met dat soort systemen en ik je dus niet een goede voor je kan uitkiezen, maar een (ultrakorte) zoektocht gaf bijvoorbeeld "Prestashop" als eentje om eens uit te proberen.
 
het is inderdaad misschien beter om een webshop op die manier op te zetten en ga prestashop zeker eens proberen.
Hartelijk dank voor alle hulp.

groeten,

Mofert1984
 
Getallen boven de 1.000 met een punt als duizend-separator

Hallo KwarK, ik probeer weer iets te doen met je geweldige voorbeeldscript over optellen, echter ik kom ergens niet uit. Stel dat er in mijn optelsom een getal voorkomt boven de duizend en ik wil dit netjes afhandelen met een . als duizend-separator. Dus bijvoorbeeld 2.515,00 in plaats van 2515,00. Kan dat ook? En kan je mij hier misschien mee helpen?

Groeten Bert.

---------------------------------------------------------------------

KwarK zei:
Oke, dat die vinkjes blijven staan moet haast iets van Apple zijn dan; onder Windows krijg ik dat zowel onder Opera als Firefox als IE niet voor mekaar. Ik heb desondanks een stukje ingebouwd dat het zou moeten fixen.

Verder heb ik nu een verborgen invoervak toegevoegd met daarin het totaal, maar dan zonder verdere opmaak (geen €-teken, decimalen met . aangegeven); deze ook met form-tags en verzend-knop, verder naar wens aan te passen.

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 input = document.getElementsByTagName("input"); // alle inputvelden verzamelen

  function update() {
      var total = 0; // teller resetten
      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
      document.getElementById("total_hidden").value = total.toFixed(2);
  };

  function init() {
      for (var i = 0; i < input.length; i++) {
        input[i].checked = false;
      }
  }
-->
</script>
</head>
<body onload="init();">
<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>
<form><input id="total_hidden" name="total" type="hidden" value="0" /> <input type="Submit" value="Verzenden" /></form>
</body>
</html>
Klik om te vergroten...
 
Kleine moeite om te maken met het ideetje op http://www.grumelo.com/2009/04/06/thousand-separator-in-javascript/ :)

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 input = document.getElementsByTagName("input"); // alle inputvelden verzamelen
 
  function update() {
      var total = 0; // teller resetten
      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_hidden").value = total.toFixed(2); // verborgen, ongeformatteerde waarde voor verzending formulier

      total = "€ " + total.toFixed(2).replace(".", ","); // voor gebruiker netjes met komma weergeven
      var sRegExp = new RegExp("(-?[0-9]+)([0-9]{3})"); // en met duizend-separator
      while(sRegExp.test(total)) {
        total = total.replace(sRegExp, "$1" + "." + "$2");
      }

      document.getElementById("total").innerHTML = total; // berekende waarde tonen
  };
 
  function init() {
      for (var i = 0; i < input.length; i++) {
        input[i].checked = false;
      }
  }
-->
</script>
</head>
<body onload="init();">
<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="1000.2" onclick="update();" /> </td><td>Product 1</td><td>€ 1.000,20</td></tr>
  <tr><td><input type="checkbox" value="500" onclick="update();" /></td><td>Product 2</td><td>€ 500,-</td></tr>
  <tr><td><input type="checkbox" value="60.99" onclick="update();" /></td><td>Product 3</td><td>€ 60,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="800" onclick="update();" /></td><td>Product 5</td><td>€ 800,-</td></tr>
  <tr><td></td><td><b>Totaal:</b></td><td id="total">€ 0,00</td></tr>
</table>
<form><input id="total_hidden" name="total" type="hidden" value="0" /> <input type="Submit" value="Verzenden" /></form>
</body>
</html>
 
Hoi KwarK, bedankt voor je reactie. (Ik zit al de hele middag te worstelen).

Mag ik je ook nog vragen wat aan de onderstaande code niet goed is? Ik heb een extern .js bestand. Daar wil ik enkele tientallen variabelen in definieren. En die wil ik dan juist weergeven op de html pagina, dus in dit voorbeeld wil ik 2515.00 veranderen in 2.515,00. Ik gebruik flarden van jouw script in een functie. Echter ik krijg een undefined terug. Kan je zeggen wat ik fout doe?

Dit staat in het externe js bestand:
var H5200_Buddybike = 2515.00.toFixed(2).replace(".", ","); // voor gebruiker netjes met komma weergeven
H5200_Buddybike = thousandSep(H5200_Buddybike)

function thousandSep(){
var sRegExp = new RegExp("(-?[0-9]+)([0-9]{3})"); // en met duizend-separator
while(sRegExp.test(H5200_Buddybike)) {
H5200_Buddybike = H5200_Buddybike.replace(sRegExp, "$1" + "." + "$2");
}
}

En in de html pagina staat dan ergens: <script>document.write(H5200_Buddybike);</script>

Kortom ik wil graag alle in het .js bestand gedefinieerde variabelen in een net number format weergeven, bijvoorbeeld zo: 2.515,00
 
Jazeker. Bekijk dit stuk eens:
[JS]var H5200_Buddybike = 2515.00.toFixed(2).replace(".", ",");[/JS]nu is het idee hiervan goed, MAAR: Javascript snapt dit niet goed:[JS]2515.00.toFixed(2)[/JS]wat daar namelijk staat is dit: Van nummer 2515 pak je (via de '.' (punt)) methode/property 00, en daar laat je de .toFixed() methode op los. probeer zoiets:
[JS]var H5200_Buddybike = (2515.00).toFixed(2).replace(".", ",");[/JS]

dit is wel even uit het hoofdje, kan je anders even je volledige pagina('s; ook losse js etc. even erbij geven) posten?
 
Hallo Vegras, perfecto! Heel erg bedankt voor de hulp. Ik zal de komende weken nog wel eens vaker een vraagje gaan stellen in dit draadje. Ik ben nog wat van plan en daarbij voorzie ik nu al moeilijkheden. Maar ja een ding tegelijk he. Enneuh . . . learning all the time za'k mar zegge.

Groeten Bert.

Vegras zei:
Jazeker. Bekijk dit stuk eens:
[JS]var H5200_Buddybike = 2515.00.toFixed(2).replace(".", ",");[/JS]nu is het idee hiervan goed, MAAR: Javascript snapt dit niet goed:[JS]2515.00.toFixed(2)[/JS]wat daar namelijk staat is dit: Van nummer 2515 pak je (via de '.' (punt)) methode/property 00, en daar laat je de .toFixed() methode op los. probeer zoiets:
[JS]var H5200_Buddybike = (2515.00).toFixed(2).replace(".", ",");[/JS]

dit is wel even uit het hoofdje, kan je anders even je volledige pagina('s; ook losse js etc. even erbij geven) posten?
Klik om te vergroten...
 
Ik wil niet refreshen bij history.go(-1)

Hier ben ik weer eens . . .

Platform: Windows XP
Browser IE8

http://www.roam.nl/buddybike_v16.php

Als ik op deze pagina wat keuzes aanzet met de vinkjes dan werkt het optellen heel mooi, (dankzij hulp van anderen natuurlijk). De bedragen worden met een css stijltje ook mooi geaccentueerd. Precies hoe ik het bedoel.
Affijn, zet even wat vinkjes aan en klik op PRINT... Vervogens kom je op een nieuwe pagina. De lijst is mooi uitgedund tot datgene wat aangevinkt was. Mooi he. Klik daar op Keuzes aanpassen... om terug te keren naar de vorige pagina. Helaas heeft IE nu niet de pagina onthouden zoals ik deze verliet. Het totaal bedrag staat namelijk weer op 0 en het geaccentueerde met de css stijl is ook weer weg. De vinkjes staan er nog steeds.
Kan iemand mij vertellen hoe ik de pagina in tact kan laten bij het terugkeren (met history.go(-1)
Ik wordt er helemaal gek van.
Let op: wel testen in IE.

Groeten Bert.

Als bijlage de bestanden.



KwarK zei:
Oke, dat die vinkjes blijven staan moet haast iets van Apple zijn dan; onder Windows krijg ik dat zowel onder Opera als Firefox als IE niet voor mekaar. Ik heb desondanks een stukje ingebouwd dat het zou moeten fixen.

Verder heb ik nu een verborgen invoervak toegevoegd met daarin het totaal, maar dan zonder verdere opmaak (geen €-teken, decimalen met . aangegeven); deze ook met form-tags en verzend-knop, verder naar wens aan te passen.

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 input = document.getElementsByTagName("input"); // alle inputvelden verzamelen

  function update() {
      var total = 0; // teller resetten
      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
      document.getElementById("total_hidden").value = total.toFixed(2);
  };

  function init() {
      for (var i = 0; i < input.length; i++) {
        input[i].checked = false;
      }
  }
-->
</script>
</head>
<body onload="init();">
<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>
<form><input id="total_hidden" name="total" type="hidden" value="0" /> <input type="Submit" value="Verzenden" /></form>
</body>
</html>
Klik om te vergroten...
 

Bijlagen

Bertus Bolknak zei:
Mooi he.
Klik om te vergroten...
Inderdaad :D

In Opera werkt dit zoals je het wil, maar in IE is dit helaas niet standaard gedrag en kan dat ook niet geforceerd worden. Gewoon history.go(-1) gebruiken zal dan ook nooit werken. Beter lijkt het mij om ófwel opnieuw buddybike_vxx.php op te roepen met meegegeven de aangevinkte waarden (en dat dan weer netjes te verwerken met PHP of evt Javascript), ófwel om op order_vxx.php een functie aan te maken die alle niet aangevinkte opties terugtovert zodat ze achteraf toegevoegd kunnen worden en het formulier quasi opnieuw gesubmit kan worden.

Let er trouwens op dat je de gebruiker er nog op moet wijzen dat hij sowieso "Buddybike (besturing achter)" of "Buddybike (besturing voor)" moet aanvinken, anders kan je een lijst samenstellen met alleen opties. Misschien kan je het beste van die twee radiobuttons maken in plaats van vinkjes, en ze daarnaast ook op een andere manier duidelijk visueel gescheiden kan maken.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan