real time calculation

**jackmaessen** · 04-08-2013 06:27 AM

Hello,

I have a problem with real time calculation.
In my script, the number of envelops should be multiplied with 2 ( in the example) and should be added to the total price.
I am sorry for the dutch language which sometimes is used in the code.
I do not know how to realise that.
Can someone help me with that?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>


<script type="text/javascript">

var logo_prijs = new Array();
logo_prijs["Ja"]=0;
logo_prijs["Nee"]=100;

function getLogoPrijs()
{
var logoPrijs=0;
var theForm = document.forms["proefberekening"];
var selectedLogo = theForm.elements["selectedlogo"];
for(var i = 0; i < selectedLogo.length; i++)
{
if(selectedLogo[i].checked)
{
logoPrijs = logo_prijs[selectedLogo[i].value];
break;
}
}
return logoPrijs;
}
// einde logo


var huisstijl_prijs = new Array();
huisstijl_prijs["Ja"]=0;
huisstijl_prijs["Nee"]=150;

function getHuisstijlPrijs()
{
var huisstijlPrijs=0;
var theForm = document.forms["proefberekening"];
var selectedHuisstijl = theForm.elements["selectedhuisstijl"];
for(var i = 0; i < selectedHuisstijl.length; i++)
{
if(selectedHuisstijl[i].checked)
{
huisstijlPrijs = huisstijl_prijs[selectedHuisstijl[i].value];
break;
}
}
return huisstijlPrijs;
}
// einde huisstijlprijs




// multiply envelop price
function multiply()
{
    //Assume form with id="theform"
    var theForm = document.forms["proefberekening"];
    
    var envelop = document.getElementById("enveloppen").value;
        var enveloppenprijs= envelop*2; //2 = price each envelop
}


//total calculation
function calculateTotal()
{
var totaalPrijs = getLogoPrijs() + getHuisstijlPrijs() + multiply();


var divobj = document.getElementById('totaal');
    divobj.style.display='block';
    divobj.innerHTML = "Your price: <b>&euro;&nbsp;"+totaalPrijs+",-</b>";

}


</script>

<div id="pricing">
<form id="proefberekening" onsubmit="return false;">
<fieldset>
<p>Make your pricing</p>
<table>
<tr>
<td><label >Do you already have a logo?</label></td>
<td><label class='radiolabel'><input type="radio" name="selectedlogo" value="Ja" onclick="calculateTotal()" />Yes</label></td>
<td><label class='radiolabel'><input type="radio" name="selectedlogo" value="Nee" onclick="calculateTotal()" />No</label></td>
</tr>
<tr>
<td><label >Do you already have a corporate identity?</label></td>
<td><label class='radiolabel'><input type="radio" name="selectedhuisstijl" value="Ja" onclick="calculateTotal()" />Yes</label></td>
<td><label class='radiolabel'><input type="radio" name="selectedhuisstijl" value="Nee" onclick="calculateTotal()" />No</label></td>
</tr>
<tr>
<td><label >How many envelopes do you want?*</label></td>
<td><label ><input type="text" name="enveloppen" id="enveloppen" onkeyup="multiply()" value="" size="20" maxlength="10" /></label></td>
</tr>
</table>
<br>
<div id="totaal"></div>
</fieldset>
</form>
</div>

</body>
</html>

**007Julien** · 04-08-2013 07:34 AM

At first, the function multiply do not return the value enveloppenprijs (replace the last line with return envelop*2; )

Then verify that the number of enveloppes is define before to return something with your onclick="calculateTotal()" on the first radio buttons !

Finally a toFixed(2) could be useful to display the price...

**rh_lloydnorthov** · 04-08-2013 07:39 AM

your multiply function isn't returning a value so the first line of code in the function calculateTotal won't return a correct value.

add

return enveloppenprij;

to the end of the multiply function, just before the closing brace;

Also, you are running multiply onkeyup in the envelope field, is this supposed to update the text field itself as the user enters a number? Since the function doesn't currently output anything to either the field itself or an HTML element, I'd do away with the onkeyup event entirely entirely.

**jackmaessen** · 04-08-2013 08:00 AM

Thank you: it works!
Example: http://www.jackmaessen.nl/test/envelop.html

Thread: real time calculation

Thread Tools

Display

real time calculation

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions