Waarde optellen

eww · 9 dec 2006

Beste allemaal,

Ik zoek een script waarmee ik een waarde kan optellen, de bedoeling is het volgende:

veld 1 - 1
veld 2 - 2
veld3 - 3
etc

Totaal - =6

Men moet de getallen dus in velden invoeren en uiteindelijk moet hier een optelling van plats vinden, ik hoop dat iemand op dit forum hiermee kan helpen. Alvaast veel dank!! :thumb:

jeroendenoot · 9 dec 2006

Ik kan je waarschijnlijk wel helpen, maar ik snap echt niet wat je bedoelt. Probeer het eens wat preciezer uit te leggen.

[Edit] Sorry, ik snap je nu wel. Ik zal zo een scriptje posten.

jeroendenoot · 9 dec 2006

Hierbij het script. Als het niet zo is hoe je bedoelde, laat het me dan nog even weten. :thumb:

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 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);
	};
	document.getElementById("sum").innerHTML = sum;
};

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

<body onload="sumup();">
Veld 1: <input id="field1" size="3" value="0" onkeyup="sumup();" /><br />
Veld 2: <input id="field2" size="3" value="0" onkeyup="sumup();" /><br />
Veld 3: <input id="field3" size="3" value="0" onkeyup="sumup();" /><br />
Totaal: <span id="sum"></span>
</body>
</html>

eww · 9 dec 2006

totaal werkt niet

He jeroen,

Super, dit is wat ik bedoel maar als ik het script gebruik en waardes in de velden invoer dan telt dezen iet op of te wel het werken in de velden werkt wel maar bij totaal komt niets te staan.

Doe ik iets verkeerd?

tnx for your help!!!

eww · 10 dec 2006

Hij Werkt

Hoi jeroen,

Sorry ik deed even iets verkeerd het werkt prima, 1 andere vraag als meer velden wil toevoegen hoe dik dat exact? bijvoorbeeld veld 4, 5 en 6???

Super en bedankt voor je hulp zover!:thumb: !!!!!

jeroendenoot · 10 dec 2006

eww zei:
als meer velden wil toevoegen hoe dik dat exact? bijvoorbeeld veld 4, 5 en 6???

Je voegt onder de velden gewoon een veld toe:

-------------------------------------
Veld 1: <input id="field1" size="3" value="0" onkeyup="sumup();" /><br />
Veld 2: <input id="field2" size="3" value="0" onkeyup="sumup();" /><br />
Veld 3: <input id="field3" size="3" value="0" onkeyup="sumup();" /><br />
Veld 4: <input id="field4" size="3" value="0" onkeyup="sumup();" /><br />
-------------------------------------

In het script voeg je de drie steeds terugkomende regels toe:

-------------------------------------
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);
};
-------------------------------------

Je moet zoals je ziet wel af en toe wat getalletjes veranderen. Laat maar weten als het niet lukt.

eww · 10 dec 2006

Tnx!!

Het gaat prima nu en werkt goed!!! bedankt voor je hulp tot zover.

echter nog 1vraagje kan ik in het script ook het lettertype wijzigen bijvoorbeeld totaal verdana vet grote 10?

jeroendenoot · 10 dec 2006

Ja natuurlijk kan dat. Zet onder </script> het volgende:

HTML:

<style type="text/css">

body
{
font-family: Verdana;
font-size: 10pt;
}

</style>

eww · 10 dec 2006

Bedankt voor je hulp!

Bedankt voor je hulp het werkt nu allemaal prima!!!!!!!

jeroendenoot · 10 dec 2006

Graag gedaan, zet je de status van deze vraag even op opgelost? :thumb:

Egel · 11 dec 2006

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.

eww · 11 dec 2006

Waarde aftellen

Hoi Jeroen,

Afgelopen weekend heb je mij geweldig geholpen met het waarde script,
Ik wilde vragen of je mij kan helpen met een soort zelfde scripje maar dan waardes aftellen

De bedoeling is het volgende:

Totaal is 25000

Veld 1 5000
Veld 2 0
Veld 3 0
Veld 4 0
Veld 5 0

Dat dan het bovenste veld veranderd in 20.000 en graag zou ik dan de resultaten willen kunnen mailen d.m.v .een verzendbutton

Ik hoop dat je me hieraan wil en kan helpen,[/B]

Alvast bedankt!!!!

jeroendenoot · 11 dec 2006

Aftrekken in plaats van optellen is niet zo moeilijk, hier is het script:

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 type="text/javascript">
<!--

function sumup(){
	var sum = 25000;
	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;
	document.getElementById("suminput").value = sum;
};

//-->
</script>
<style type="text/css">

body
{
font-family: Verdana;
font-size: 10pt;
}

</style>
</head>

<body onload="sumup();">
<form method="post">
Totaal: <span id="sum"></span><input type="hidden" name="sum" id="suminput" value="" /><br />
Veld 1: <input name="field1" id="field1" size="3" value="0" onkeyup="sumup();" /><br />
Veld 2: <input name="field2" id="field2" size="3" value="0" onkeyup="sumup();" /><br />
Veld 3: <input name="field3" id="field3" size="3" value="0" onkeyup="sumup();" /><br />
Veld 4: <input name="field4" id="field3" size="3" value="0" onkeyup="sumup();" /><br />
Veld 5: <input name="field5" id="field3" size="3" value="0" onkeyup="sumup();" /><br />
<input type="submit" value="Verzenden" />
</form>
</body>
</html>

Het mailen daarentegen, is wel een stuk moeilijker, tenzij je gebruik wilt maken met het mailprogramma van de bezoeker. Als je dat niet wilt zul je een serverside scripttaal moeten gaan gebruiken, zoals PHP, ASP of CGI.
Als je het via het mailprogramma van de bezoeker wil doen kan ik je wel helpen. Ook als je het serverside wilt doen en je hebt PHP-ondersteuning hebt met een mailserver kan ik je helpen. Van ASP en CGI weet ik vrijwel niets.

eww · 11 dec 2006

waarde aftellen

Hoi Jeroen,

Tnx again, is het aan te bevelen om te mailen via het programma van de gebruiker? verder moet ik de totale waarde ook in kunnen voeren in een tekstvak waarna het verschijnt voor het aftellen (hoop dat je me begrijpt)

of te wel

Gebruiker vult totaal in

Totaal verschijnt

en daarna aftellen, zoals het nu staat

zou super zijn!!!:thumb:

jeroendenoot · 11 dec 2006

Het mailen met het mailprogramma van de bezoeker is af te raden, omdat als de bezoeker geen mailprogramma heeft, of er is geen e-mailadres ingesteld, dan kan er geen e-mail verzonden worden. Dat is één van de vele nadelen.

Met een kleine aanpassing kan de bezoeker zelf het totaal invullen:

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 type="text/javascript">
<!--

var start = parseInt(prompt("Vul het totaal in:", "25000"));
if(isNaN(start)){
	start = 0;
};

function sumup(){
	var sum = start;
	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;
	document.getElementById("suminput").value = sum;
};

//-->
</script>
<style type="text/css">

body
{
font-family: Verdana;
font-size: 10pt;
}

</style>
</head>

<body onload="sumup();">
<form method="post">
Totaal: <span id="sum"></span><input type="hidden" name="sum" id="suminput" value="" /><br />
Veld 1: <input name="field1" id="field1" size="3" value="0" onkeyup="sumup();" /><br />
Veld 2: <input name="field2" id="field2" size="3" value="0" onkeyup="sumup();" /><br />
Veld 3: <input name="field3" id="field3" size="3" value="0" onkeyup="sumup();" /><br />
Veld 4: <input name="field4" id="field3" size="3" value="0" onkeyup="sumup();" /><br />
Veld 5: <input name="field5" id="field3" size="3" value="0" onkeyup="sumup();" /><br />
<input type="submit" value="Verzenden" />
</form>
</body>
</html>

eww · 11 dec 2006

vervolg op waarde

Hoi Jeroen,

Dit zou m inderdaad moeten wezen, nu de uitdaging aan mij om het kwa lay out nog mooi te krijgen

)

De verzend button die er nu in staat heeft neem ik aan geen functie, of moet ik in het script nog een mailadres toevoegen.

:thumb:

jeroendenoot · 11 dec 2006

De functie van de verzendbutton is nu dat de gegevens naar dezelfde pagina worden verzonden, maar er gebeurt nog niks mee, omdat er geen serverside script staat. Als je wilt mailen met het mailprogramma van de bezoeker verander je de form tag in:

HTML:

<form action="mailto:email@adres.nl" method="post">

johnpieters · 29 jan 2007

cijfers achter de komma ??

Ik zag dit onderwerp.............en ben zeer benieuwd of er ook een oplossing is
voor situatie's (optellen van euro bedragen) met cijfers achter de komma.

Tevens zoek ik zoiets met een checkbox ervoor. Dus als iets gekozen wordt dan
pas het bedrag en op het eind de optelling.

Helaas kom ik daar zelf niet achter.

John

jeroendenoot · 29 jan 2007

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>

Egel · 29 jan 2007

johnpieters zei:
... (optellen van euro bedragen) met cijfers achter de komma ... met een checkbox ervoor. Dus als iets gekozen wordt dan
pas het bedrag en op het eind de optelling.

Dit script doet dat:

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 f = document.f, sum = 0;
    for (var i = 0; i < f.field.length; i++) if (f.check[i].checked) sum += parseFloat(f.field[i].value.replace(',','.'));
    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 type="checkbox" name="check" onclick="sumup()"> <input name="field" type="text" size="3" value="0" onkeyup="sumup()"><br>
   Veld 2: <input type="checkbox" name="check" onclick="sumup()"> <input name="field" type="text" size="3" value="0" onkeyup="sumup()"><br>
   Veld 3: <input type="checkbox" name="check" onclick="sumup()"> <input name="field" type="text" size="3" value="0" onkeyup="sumup()"><br>
   Veld 4: <input type="checkbox" name="check" onclick="sumup()"> <input name="field" type="text" size="3" value="0" onkeyup="sumup()"><br>
   Veld 5: <input type="checkbox" name="check" onclick="sumup()"> <input name="field" type="text" size="3" value="0" onkeyup="sumup()"><br>
   Veld 6: <input type="checkbox" name="check" onclick="sumup()"> <input name="field" type="text" size="3" value="0" onkeyup="sumup()"><br>
  </form>
  Totaal: <span id="sum"></span>
 </body>
</html>

De .replace(',','.') vervangt een eventuele komma door een punt zodat het javascript het als een kommagetal ziet (engelse notatie). Dat wordt verwerkt door parseFloat() ipv parseInt().

if (f.check.checked) kijkt of de checkbox is aangevinkt.

Dit script maakt gebruik van het feit dat als meerdere formuliervelden dezelfde naam hebben (check & field) ze een array vormen (check & field).

Anders wordt het een rijtje met:
if (f.check_naam.checked) sum += parseFloat(f.field_naam.value.replace(',','.'));
if (f.check_anderenaam.checked) sum += parseFloat(f.field_anderenaam.value.replace(',','.'));

Vr.Gr. Egel.

Waarde optellen

Gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Wij waarderen jouw privacy