Simple Javascript Calculator Help

merlingoth · 09-21-2011, 11:31 PM

I'm new to javascript but not to programming. Here is my code:

PHP Code:

PHP Code:


			
print "<form name='goldcalculator'>";

print "<input type='hidden' name='goldspot' value='$goldvalue'>";

print "<select name='gunit' onchange='updateTotal();'>";

print "<option value='20'>Pennyweight (DWT)</option>";

print "<option value='31.1'>Grams (g)</option>";

print "</select><br>";

print "10K <input type='text' name='10k' onchange='updateTotal();'><br>";

print "14K <input type='text' name='14k' onchange='updateTotal();'><br>";

print "18K <input type='text' name='18k' onchange='updateTotal();'><br>";

print "22K <input type='text' name='22k' onchange='updateTotal();'><br>";

print "24K <input type='text' name='24k' onchange='updateTotal();'><br>";

print "TOTAL <input type='text' name='totalprice'>";

print "</form>";

Code:

<script language="JavaScript">
function updateTotal()
{
var u = document.goldcalculator.gunit.value;
var spotprice = document.goldcalculator.goldspot.value / u;
var gold10 = document.goldcalculator.10k.value;
var gold14 = document.goldcalculator.14k.value;
var gold18 = document.goldcalculator.18k.value;
var gold22 = document.goldcalculator.22k.value;
var gold24 = document.goldcalculator.24k.value;
var calculatedPrice = document.goldcalculator.totalprice.value;
calculatedPrice = ((spotprice*.999*gold24)+(spotprice*.916*gold22)+(spotprice*.75*gold18)+(spotprice*.585*gold14)+(spotprice*.417*gold10));
}
</script>

I don't know where to begin to debug this. It's very simple. The $goldvalue variable is non-editable and is pulled off my MySQL database and that works. They fill in the inputs via the PHP form and then it basically adds them up and spits out the total. Can someone tell me what's wrong?

DaveyErwin · 09-22-2011, 01:20 AM

Names must not start with number,
do something like this
name="n10k"

document.goldcalculator.totalprice.value
returns a string, setting it will not
alter the value of the text box
do something like this
var calculatedPrice = document.goldcalculator.totalprice;
calculatedPrice.value =

var u = document.goldcalculator.gunit.value;

u will be a string not a number , input values
are returned as strings, you must convert them
to numbers

DaveyErwin · 09-22-2011, 01:41 AM

Here is some code that
works in most modern
browsers.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">
function updateTotal(){
var u = document.goldcalculator.gunit.value;
var spotprice = document.goldcalculator.goldspot.value / u;
var gold10 = document.goldcalculator.n10k.value;
var gold14 = document.goldcalculator.n14k.value;
var gold18 = document.goldcalculator.n18k.value;
var gold22 = document.goldcalculator.n22k.value;
var gold24 = document.goldcalculator.n24k.value;
var calculatedPrice = document.goldcalculator.totalprice;
calculatedPrice.value = ((spotprice*.999*gold24)+(spotprice*.916*gold22)+(spotprice*.75*gold18)+(spotprice*.585*gold14)+(spotprice*.417*gold10));
}  
</script>

<style type="text/css">
</style>
<body>
<div id="content">
<?php
$goldvalue = 2000;
print "<form name='goldcalculator'>"; 
print "<input type='hidden' name='goldspot' value='$goldvalue'>"; 
print "<select name='gunit' onchange='updateTotal();'>"; 
print "<option value='20'>Pennyweight (DWT)</option>"; 
print "<option value='31.1'>Grams (g)</option>"; 
print "</select><br>"; 
print "10K <input type='text' name='n10k' onchange='updateTotal();'><br>"; 
print "14K <input type='text' name='n14k' onchange='updateTotal();'><br>"; 
print "18K <input type='text' name='n18k' onchange='updateTotal();'><br>"; 
print "22K <input type='text' name='n22k' onchange='updateTotal();'><br>"; 
print "24K <input type='text' name='n24k' onchange='updateTotal();'><br>"; 
print "TOTAL <input type='text' name='totalprice'>"; 
print "</form>";  
?>
</div>
</body>
</html>

The values returned from the form
are strings but when a string is
used in a calculation( Except Addition !)
it is automatically converted to number.

merlingoth · 09-22-2011, 02:10 AM

Thanks, I'll check it right now! As soon as I posted, I realized that I started it with numbers, but figured there were more problems and you guys would catch it anyway so I didn't edit it to confuse anybody.

===EDIT===

WORKS PERFECTLY! THANKS SO MUCH!!!