Archief - Jquery rekenen

Pip · 31 dec 2010

Hoi,

ik zou graag een rekenformulier maken dat met jquery automatisch de uitkomst toont.
in html had ik gedacht om de input met een textfield te doen en dan met radiobuttons de gebruiker een optie te geven het x2 of x3 te doen maar ik weet niet goed hoe eraan te beginnen.

Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#formulier1").change(function(){
			$("#resultaat").html('resultaat: '+bereken_resultaat());
		})	
</head>
<body>
	<form id="formulier1">
		<input type="text" name="input">
		<input type="radio" name="multiply">2
		<input type="radio" name="multiply">3
	</form>	
	
<div id="resultaat"></div>
</body>		
</html>

dit is de html code iemand die mij een tutorial kan geven of kan uitleggen hoe ik dit doe?
bedankt

Pip · 31 dec 2010

ondertussen heb ik een voorbeeld gevonden waarmee ik mijn eigen formulier mee gemaakt heb, nu geeft hij bij het totaal als resultaat NaN kan er iemand mij vertellen wat ik fout heb gedaan?

Code:

<html>
<head>
	<title>Muurschilderingen</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
	$(".calculate").change(function(){
	var valone = $('input:radio[name=soort]:checked').val();
	var valtwo = $('#opp').val();
	var valthree = $('input:radio[name=schets]:checked').val();
	var valfour = $('input:radio[name=date]:checked').val();

	var total = ((valone * 1) * (valtwo * 1) + (valthree * 1) + (valfour * 1));
	$('#Total').text(total);
	});
	});
	</script>
</head>
<body>
	<form name="formulier1">
		1. Te bespuiten object<br />
		<input type="radio" name="ondergrond">Buitenmuur<br />
		<input type="radio" name="ondergrond">Binnenmuur<br />
		<input type="radio" name="ondergrond"><input type="text" name="ondergrond"><br />
		<br />
		<br />
		2. Soort muurschildering <br />
		<input type="radio" name="soort" value="55" class="calculate">Throw up<br />
		<input type="radio" name="soort" value="65" class="calculate">Throw up + Characters<br />
		<input type="radio" name="soort" value="75" class="calculate">Characters<br />
		<input type="radio" name="soort" value="85" class="calculate">Abstract<br />
		<input type="radio" name="soort" value="95" class="calculate">Abstract + Realisme<br />
		<input type="radio" name="soort" value="105" class="calculate">Realisme<br />
		<br />
		<br />
		3. Aantal m&sup2;: <input type="text" id="opp" name="oppervlakte"><br/>
		<br />
		<br />
		4. Schets <br />
		<input type="radio" name="schets" value="100" class="calculate">Ja, ik wens een schets en betaal een voorschot van &euro;100,00<br />
		<input type="radio" name="schets" value"0" class="calculate">Nee, ik wens geen schets <br />
		<br />
		<br />
		5. Idee&euml;n/thema/wensen/hoofdkleur<br />
		<textarea cols="50" rows="4" name="comments"></textarea><br />
		<br />
		<br />
		6. Gewenste dagen uitvoering<br />
		<input type="checkbox" id="check1">Dinsdag<br />
		<input type="checkbox" id="check2">Woensdag<br />
		<input type="checkbox" id="check3">Donderdag<br />
		<input type="checkbox" id="check4">Vrijdag<br />
		<input type="checkbox" id="check5">Zaterdag<br />
		<br />
		<br />
		7. Startdatum<br />
		<input type="radio" name="date" value="75" class="calculate">Spoedprocedure binnen de maand<br />
		<input type="radio" name="date" value="0" class="calculate">Normale procedure binnen de 3 maand<br />
		<br />
		<br />
		8. Kortingscode <input type="text" idd="korting" name="discount"><br />
</form>
<br />
<br />
Totaal: <span id="Total"></span>
</body>
</html>

metalleke · 31 dec 2010

Je probleem is dat zolang niet alle waarden aangeduid zijn, je zit te rekenen met variablen die undefined zijn. En hierdoor dus een ongeldige nummerwaarde krijgt. Voorbeeld:

Not-a-Number

Code:

valone: string
valtwo: string
valthree: undefined
valfour: undefined
total: number

a-Number

Code:

valone: string
valtwo: string
valthree: string
valfour: string
total: number

Spacy2003 · 31 dec 2010

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat

NaN staat voor Not a Number, wat dus wil zeggen dat je strings aan het optellen bent met een integers of floats. Javascript is daar vrij "lastig" in aangezien het dezelfde operator gebruikt om te concateneren en te rekenen. Ook al is er maar 1 van je getallen een string dan nog gaat hij alle getallen omzetten naar een string. Waardoor je als resultaat NaN krijgt.

edit: of inderdaad undefined values

metalleke · 31 dec 2010

Spacy2003 zei:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat

NaN staat voor Not a Number, wat dus wil zeggen dat je strings aan het optellen bent met een integers of floats. Javascript is daar vrij "lastig" in aangezien het dezelfde operator gebruikt om te concateneren en te rekenen. Ook al is er maar 1 van je getallen een string dan nog gaat hij alle getallen omzetten naar een string. Waardoor je als resultaat NaN krijgt.

edit: of inderdaad undefined values

Sowieso gaan die waarden een string zijn, je moet ook die omzetting niet doen. Je moet er enkel voor zorgen dat je geen berekeningen doet met undefined.

K zie dat je meerdere keren een event gaat binden via de class. Eventueel kun je dit ook doen via een bovenliggend element. Hierdoor hoeft de engine maar 1 keer een event toe te voegen. Alhoewel dit hier bitterweinig problemen zal opleveren.

Drone · 31 dec 2010

metalleke zei:
Sowieso gaan die waarden een string zijn, je moet ook die omzetting niet doen. Je moet er enkel voor zorgen dat je geen berekeningen doet met undefined.

Als je bijvoorbeeld in JavaScript 1 + 1 + '1' doet krijg je '21' dus je moet parseInt of parseFloat doen op resultaten die je krijgt van input velden.

EDIT:

http://jsfiddle.net/MKw7B/

Ook values die je van input fields krijgt zijn die niet gewoon een lege string en dus niet undefined?

Het kan zijn dat ik iets gemist heb ik heb niet alles grondig gelezen.

metalleke · 31 dec 2010

[drone]-[1.05];14313561 zei:
Als je bijvoorbeeld in JavaScript 1 + 1 + '1' doet krijg je '21' dus je moet parseInt of parseFloat doen op resultaten die je krijgt van input velden.

Kijk even eerst in zijn code, dan zie je wel waarom ik dit zeg. Het was misschien inderdaad wel iets te onduidelijk uitgelegd.

Ofwel doet hij dit juist om het probleem te omzeilen, geen idee

Dacht eerst dat het mss deel van berekening was, die nadien dan nog moest aangepast worden.

Drone · 31 dec 2010

metalleke zei:
Kijk even eerst in zijn code, dan zie je wel waarom ik dit zeg. Het was misschien inderdaad wel iets te onduidelijk uitgelegd.

Ofwel doet hij dit juist om het probleem te omzeilen, geen idee Dacht eerst dat het mss deel van berekening was, die nadien dan nog moest aangepast worden.

Ah, ik had die * 1 niet gezien.

metalleke · 31 dec 2010

[drone]-[1.05];14313610 zei:
Ah, ik had die * 1 niet gezien.

Die jsFiddle is wel nice, meestal doe ik zulke testen momenteel gewoon in firebug console. Maar ga da es bookmarken.

Drone · 31 dec 2010

Heel simpele functie om het probleem op te lossen van de OP.

Code:

function isNumber(s, def){
    return parseInt(s) || def; //def == default als parseInt == NaN
};

Als je iets meer geavanceerd wilt Google dan is met 'javascript isNumeric' of zoiets.

Voorbeeld:
Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

metalleke · 31 dec 2010

Ik vroeg me net iets af nu

Code:

function doParse() {
	var a = '54698465356615341654';
	var b = parseInt(a);
	console.log(typeof(b));
}

function doMulti() {
	var c = '54698465356615341654';
	var d = c * 1;
	console.log(typeof(d));
}

function doAdd() {
	var e = '54698465356615341654';
	var f = +e;
	console.log(typeof(f));
}

function doStart() {
	console.profile('Measuring time');
	doParse();
	doMulti();
	doAdd();
	console.profileEnd();
}

Code:

Measuring time (0.141 ms, 3 aanroepen)
doParse	1	55.32%	0.078ms	3.814ms	3.814ms	3.814ms	3.814ms	
doAdd	1	24.11%	0.034ms	1.916ms	1.916ms	1.916ms	1.916ms	
doMulti	1	20.57%	0.029ms	2.237ms	2.237ms	2.237ms	2.237ms

Pip · 31 dec 2010

alles werkt als je alle opties aanvinkt behalve bij de schets, als je de eerste radiobutton aanvinkt neemt hij de waarde van 100 over en geeft hij een resultaat, maar als je de tweede radiobutton aanvinkt met waarde 0 blijft hij NaN geven hoe komt dit?

Pip · 31 dec 2010

heb het opgelost, bedankt voor de hulp en de reacties en tot het volgende probleem he

Archief - Jquery rekenen

Pip

Legacy Member

Pip

Legacy Member

metalleke

Legacy Member

Spacy2003

Legacy Member

metalleke

Legacy Member

Drone

Legacy Member

metalleke

Legacy Member

Drone

Legacy Member

metalleke

Legacy Member

Drone

Legacy Member

metalleke

Legacy Member

Pip

Legacy Member

Pip

Legacy Member