getal ingeven met komma ipv punt

Status
Niet open voor verdere reacties.
Volgens mij is dat afhankelijk van de regionale instellingen van de machine waarop dat script draait.
Dat staat nu kennelijk op Amerikaans waar 10,000.95 de standaard is in plaats van 10.000,95 zoals wij gewend zijn.

Ik zou er geen punt van maken ;)
 
Ik wel! :p
Want los van de land-instelling gebruikt javascript inwendig altijd de Amerikaanse notatie: punten i.p.v. komma's. Anders kan javascript niet rekenen, dan komt er als foutmelding NaN (Not a Number). En ik dacht dat de land-instelling niet in de browsers doorwerkt naar de waarden die in een tekstveld worden ingevuld: weet zo'n browser veel!

Om van ingetikte getallen met komma's naar Amerikaanse notatie te gaan, kan met replace(',','.') de komma vervangen worden door een punt. Maar dan is het ingevoerde getal nog steeds een string (want de oorspronkelijke value was een string en geen getal!). Van de string moet dus een getal gemaakt worden, wat kan met parseFloat().
Dan wordt het iets als:
[JS]var puntGetal;
function kommaNaarPunt(kommaString){
var puntString = kommaString.replace(',','.');
puntGetal = parseFloat(puntString);
}[/JS]
De kommaString is de input-value vanuit het textveld.
Met de uitkomst puntGetal kan verder gerekend worden.

Na het rekenen moet het omgekeerde gebeuren: van punten naar komma's. Eerst twee cijfers achter de punt(=komma) van maken met toFixed(2), dan omzetten met toString(), en dan weer een replace de andere kant op.
Het bovenstaande als principe. In de praktijk zullen alle in te vullen vakjes een eigen (getal)variabele moeten krijgen, die onthouden wordt voor de nieuwe berekening als er in een ander vakje iets anders ingevuld wordt.
Valt daar iets van te maken?

Met vriendelijke groet,
CSShunter
___________
PS: i.p.v. onchange="calculate()" zou ik onkeyup="calculate()" gebruiken. Bij een onchange werkt het pas als je buiten het tekstvak op iets anders klikt. De onkeyup werkt direct op alles door als een volgend cijfer (of komma) is ingevuld.
 
Laatst bewerkt:
dat komt als Chinees over bij mij :o

Maar zet deze functie ook al niet om naar strings ? (Deze zit al in mijn code)
[JS]function dp(price)
{
string = "" + price;
number = string.length - string.indexOf('.');
if (string.indexOf('.') == -1)
return string + '.00';
if (number == 1)
return string + '00';
if (number == 2)
return string + '0';
if (number > 3)
return string.substring(0,string.length-number+3);
return string;
}[/JS]
 
Hoi ,
Maar zet deze functie ook al niet om naar strings ?
Klik om te vergroten...
Zeker, maar die houdt nog geen rekening met de omzetting van punten naar komma's, en dan wordt ie een stuk lastiger. En zo is het een stuk simpeler:
[JS]rekenPrijs = parseFloat(prijsString); // naar echt getal
rekenPrijs = rekenPrijs.toFixed(2); // altijd 2 cijfers achter de punt
[/JS]
Verder heb ik vroeger eens geleerd "eval is evil" (waarom weet ik ook niet meer, maar dat is wel te Google'en).
Zo ben ik maar eens op mijn eigen lego-manier aan het knutselen geslagen:
[JS]var aantal_1, aantal_2, aantal_3, aantal_4;
var prijs_1, prijs_2, prijs_3, prijs_4;
var totaal_1, totaal_2, totaal_3, totaal_4;

function berekenRij(i){
var aantalString = document.getElementById('aantal_'+i).value; // string
var aantalGetal = parseFloat(aantalString); // naar echt getal
if (i=='1'){aantal_1 = aantalGetal;} // onthouden
if (i=='2'){aantal_2 = aantalGetal;} // onthouden
if (i=='3'){aantal_3 = aantalGetal;} // onthouden
if (i=='4'){aantal_4 = aantalGetal;} // onthouden

var prijsString = document.getElementById('prijs_'+i).value; // string
if (prijsString.indexOf(',')){ // als er een komma in staat
var prijsString = prijsString.replace(',','.'); // van komma naar punt
}
rekenPrijs = parseFloat(prijsString); // naar echt getal
rekenPrijs = rekenPrijs.toFixed(2); // altijd 2 cijfers achter de punt
if (i=='1'){ prijs_1 = rekenPrijs; } // onthouden
if (i=='2'){ prijs_2 = rekenPrijs; } // onthouden
if (i=='3'){ prijs_3 = rekenPrijs; } // onthouden
if (i=='4'){ prijs_4 = rekenPrijs; } // onthouden

totaalGetal = (aantalGetal * rekenPrijs).toFixed(2); // totaal berekenen
if (i=='1'){ totaal_1 = totaalGetal; } // onthouden
if (i=='2'){ totaal_2 = totaalGetal; } // onthouden
if (i=='3'){ totaal_3 = totaalGetal; } // onthouden
if (i=='4'){ totaal_4 = totaalGetal; } // onthouden

totaalString = totaalGetal.toString(); // string van maken
totaalString = totaalString.replace('.',','); // van punt naar komma
if (totaalString =='NaN'){ // als geen getal ergens
document.getElementById('totaal_'+i).value = ''; // vakje leeg laten
}
else {
document.getElementById('totaal_'+i).value = totaalString; // invullen in vakje
}
}
[/JS]
Het kan waarschijnlijk ook anders en compacter.
  • Principe: [van ingevulde strings (met komma) naar getallen met punt] > [rekenen met de getallen] > [terug naar strings met komma's voor op het scherm].

  • Resultaat: www.developerscorner.nl/csshunter/tests/komma-punt-nw-1.htm
  • Hij werkt ook als je € 4,-- invult i.p.v. € 4,00. :)
  • Alleen de rij-bewerkingen zitten hierin; de optelsommen moeten nog volgen (wel zijn de te gebruiken variabelen alvast klaargezet).
Misschien is dat wat minder Chinees? ;)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ik begin er zicht op te krijgen.
Ik krijg de toaalGetal-waarden nu opgeteld, maar er hapert nog iets met de ".toFixed(2)".
http://www.frogstyling.be/X_Tests/Faktuur_Calculate/test-Calculate.asp

[JS]function berekenSubtotaal(){
subtotaalString_1 = totaal_1.toString();
subtotaalString_2 = totaal_2.toString();

subtotaal = parseFloat(subtotaalString_1) + parseFloat(subtotaalString_2);
subtotaalBedrag = subtotaal.toString();
subtotaalBedrag = subtotaalBedrag.replace('.',',');
document.getElementById('subtotaal').value = subtotaalBedrag

}

function berekenAlles(){
// later voor optelsom en btw-berekening

}
[/JS]
 
Laatst bewerkt:
We zijn op weg! :cool:
Wat jij doet, is eerst een subtotaalString_1 enz. maken, om die daarna om te zetten tot getal. Dat hoeft niet, want wat in de rijtotalen is opgeslagen blijkt al een string te zijn als je ze terugvraagt.
De toFixed(2) zou in jouw code tussen regel 5 en regel 6 moeten staan, dan zijn de onnodige decimalen verduisterd voordat er een string van wordt gemaakt.

Ik zat te denken aan zoiets:
[JS]var aantal_1, aantal_2, aantal_3, aantal_4;
var prijs_1, prijs_2, prijs_3, prijs_4;
var rijtotaal_1 = 0, rijtotaal_2 = 0, rijtotaal_3 = 0, rijtotaal_4 = 0;

function berekenRij(i){
var aantalString = document.getElementById('aantal_'+i).value; // string
... enz.; her en der wat gewijzigd!
}

var subtotaalGetal;
function berekenSubtotaal(){
subtotaalGetal = parseFloat(rijtotaal_1) + parseFloat(rijtotaal_2) + parseFloat(rijtotaal_3) + parseFloat(rijtotaal_4);
subtotaalGetal = subtotaalGetal.toFixed(2);
var subtotaalString = subtotaalGetal.toString(); // string van maken
subtotaalString = subtotaalString.replace('.',','); // van punt naar komma
document.getElementById('subtotaal').value = subtotaalString; // invullen in vakje
}

function berekenAlles(i){
berekenRij(i);
berekenSubtotaal();
// vervolg voor berekenen verzendkosten, btw enz.
}[/JS]
via:
HTML: 
...
		<td><input type="text" id="aantal_1" onkeyup="berekenAlles('1')" /></td>
		<td><input type="text" id="prijs_1"  class="eur" onkeyup="berekenAlles('1')" /></td>
		<td><input type="text" id="rijtotaal_1" class="eur tot" disabled="disabled" /></td>
... enz.
	<tr>
		<td></td>
		<td>SUBTOTAAL</td>
		<td><input type="text" id="subtotaal" class="eur subtot" disabled="disabled"/></td>
	</tr>
Veranderingen t.o.v. versie 1 ("voortschrijdend inzicht" ;)):
  • In de rij-berekening heb ik veranderd: de variabele-namen, om duidelijker aan te geven wat wat is.
  • De NaN heb ik omgezet naar de waarde 0. Dan is deze waarde rechtstreeks aan te roepen in de optelsom (terwijl de betreffende rijtotaal-vakjes gewoon leeg blijven als een rij niet is ingevuld).
  • De functie "berekenAlles(i){...}" is nu de algemene noemer voor de onkeyup: dan wordt steeds automatisch ook het subtotaal berekend. En er kunnen later ook de verdere bewerkingsfuncties in gestopt worden.
Met vriendelijke groet,
CSShunter
 
Ja, deze grappen zijn stevig puzzelen geblazen als dat niet je dagelijkse werk is. :rolleyes:
Met wat Trial & Error experimenten :D en ingelaste alert(variabele)'s (en assistentie van de javascript-afdeling van w3schools.com) heb ik nu de volgende in elkaar gebeiteld.
  • Test: komma-punt-nw-3.htm

  • Er zijn wat fout-correcties aan toegevoegd: bv. voor als je een al ingevuld vakje wist en de andere intact laat (dan springen de totalen terug naar lege vakjes, i.p.v. op € 0,00 of NaN te gaan staan).
  • Het kost ook wat extra moeite om de € 1,60 selectie in het vakje te krijgen.
  • In het TOTAAL-vakje is na het berekenen de "readOnly" functie gebruikt i.p.v. "disabled", zodat de besteller dit bedrag kan kopiëren om foutloos in te plakken op z'n giro-overschrijving.
  • Ik ben er trouwens van uitgegaan dat de aantallen hele getallen zijn; als het ook breuken kunnen zijn, moet er nog wat extra gesleuteld worden.
  • Nu moet het terugrekenen voor de BTW nog plaatsvinden (dat was toch de bedoeling?).
Met vriendelijke groet,
CSShunter
_______
PS: wel een toer om een machine uit te leggen wat iedereen zo op een kladblaadje kan opschrijven. ;)
 
Laatst bewerkt:
drukke week achter de rug

Ik ben er trouwens van uitgegaan dat de aantallen hele getallen zijn; als het ook breuken kunnen zijn, moet er nog wat extra gesleuteld worden.
Klik om te vergroten...
Geen breuken. :)

Enkel het btw-bedrag zou er nog tussen moeten staan.
Het TOTAAL is het bedrag incl. 21% btw. Voorbeeldje ...
2 x 5,00 = 10,00 euro + 2,80 verzending = 12,80 euro.
Daarom het vakje totaal ex btw : TOTAAL / 1,21 = 10,57 (om dit getal te hebben).
Btw bedrag is dan "gewoon" TOTAAL - totaal ex btw = 12,80 - 10,58 = 2,22.

Klinkt verwarrend, maar ik weet anders niet hoe het btw te berekenen.
 
Hoi-hoi,
Nu dacht ik dat ik 'm had:
maar ... ik had 'm gemaakt met Firefox als check, en de voorgaande ronde al niet getest in andere browsers. Foei! :o
Wat blijkt:
  • In Firefox en Opera vliegt ie als een speer.
  • Maar IE (7 en 8), Chrome en Safari reageren totaal niet op de onclick="geefVerzending()" van het uitrolvakje met de verzendkosten. Yak!
Daar moet dus nog "even" wat op verzonnen worden.

Ik ga m'n best doen, maar beloof niks. ;)
CSShunter
 
Laatst bewerkt:
Bedankt ! :thumb:

Hier bij mij werkt het in IE9 (ook 64 bits) en FF 4.0.1.
 
Tja, voor de browsers die niet die onclick op een uitrolvakje kunnen hanteren: dan bouwen we met een paar images en wat css en javascript zelf maar zo'n uitrolvakje. :p
  • www.developerscorner.nl/csshunter/tests/bestelformulier-0.htm

  • Controle: 3 stuks van 3,50 bij 1,60 verzendkosten > BTW-berekening klopt.
  • Minstens werkzaam in FF, Chrome, IE6 (!), IE7, IE8, Opera en Safari. :)

  • In IE6 is er een klein schoonheidsfoutje in de opmaak, maar lijkt me niet de moeite waard om achteraan te gaan.
  • Sommige browsers blijven de tekstkleur in een disabled tekstvak op grijs houden, ook al is in de css anders bepaald. Dat maakt ze niet zo prettig leesbaar. Vandaar nu alle disabled tekstvakken een readOnly gegeven, zodra ze getoond worden: dan gehoorzamen ze wel aan de opgegeven css.
Ziezo!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan