the toFixed() tag refuses to work on 2-variables on the same document

joeasley · 09-13-2006, 08:45 PM

THE following is an experimental FORM simply to calculate:-
The SUM TOTAL of 4-Quantity (Integer) INPUTS
Then TOTAL COST of those based on a fixed UNIT COST
Then a TAX VALUE based on a fixed TAX-RATE on the TOTAL COST
Then DISPLAY the TOTAL QUANTITY
Then DISPLAY the TOTAL COST to 2-Decimal Places
Then DISPLAY the TAX VALUE to 2-Decimal Places

Please see the 'invoicecalc' function at the bottom of the Body Section

Everything works EXCEPT the line "document.forms['form_2'].elements['edit_26'].value=totalcost;" will NOT ALLOW me to set it to 2-decimal places. (I've left off the 'toFixed(2)' modifier because it is stops the function from completing the routine). The same command works properly for the TAX-VALUE.

All suggestions will be very much appreciated.
*****************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<meta name="Generator" content="Serif WebPlus 10.0.0.019">
<title>Home</title>
<script type="text/javascript">
function validate_form_2( form )
{
if( form.elements['Qty1'].value=="" ) { alert("Must not be empty"); form.elements['Qty1'].focus(); return false; }
if( isNaN( parseInt( form.elements['Qty1'].value ) ) ) { alert("Please enter a number"); form.elements['Qty1'].focus(); return false; }
if( form.elements['Qty2'].value=="" ) { alert("Please enter some text"); form.elements['Qty2'].focus(); return false; }
if( isNaN( parseInt( form.elements['Qty2'].value ) ) ) { alert("Please enter a number"); form.elements['Qty2'].focus(); return false; }
if( form.elements['Qty3'].value=="" ) { alert("Please enter some text"); form.elements['Qty3'].focus(); return false; }
if( isNaN( parseInt( form.elements['Qty3'].value ) ) ) { alert("Please enter a number"); form.elements['Qty3'].focus(); return false; }
if( form.elements['Qty4'].value=="" ) { alert("Please enter some text"); form.elements['Qty4'].focus(); return false; }
if( isNaN( parseInt( form.elements['Qty4'].value ) ) ) { alert("Please enter a number"); form.elements['Qty4'].focus(); return false; }
return true;
}
</script>
<style type="text/css">

</style>
</head>
<body link="#0000ff" vlink="#ff0000" alink="#0000ff" text="#000000" style="background: #ffffff; height:1000px;">
<center><div style="position:relative;width:750px;">
<form id="form_2" name="Purchase" onsubmit="return validate_form_2(this)" method="post" target="_self" enctype="application/x-www-form-urlencoded">
<div id="txt_29" style="position:absolute; left:154px; top:146px; width:69px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_19"><P class="Normal-P"><span class="Normal-C">Quantity-<wbr>1</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:146px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_19" name="Qty1" size="4" value="0">
</div>
<div id="txt_30" style="position:absolute; left:154px; top:176px; width:69px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_20"><P class="Normal-P"><span class="Normal-C">Quantity-<wbr>2</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:176px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_20" name="Qty2" size="4" value="0">
</div>
<div id="txt_32" style="position:absolute; left:154px; top:206px; width:69px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_22"><P class="Normal-P"><span class="Normal-C">Quantity-<wbr>3</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:206px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_22" name="Qty3" size="4" value="0">
</div>
<div id="txt_33" style="position:absolute; left:154px; top:236px; width:69px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_23"><P class="Normal-P"><span class="Normal-C">Quantity-<wbr>4</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:236px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_23" name="Qty4" size="4" value="0">
</div>
<div id="txt_31" style="position:absolute; left:154px; top:266px; width:90px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_21"><P class="Normal-P"><span class="Normal-C">Total Quantity</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:266px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_21" name="totqty" size="4" maxlength="3" readonly value="">
</div>
<div id="txt_34" style="position:absolute; left:154px; top:296px; width:62px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_25"><P class="Normal-P"><span class="Normal-C">Unit Cost</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:296px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_25" name="unitcost" size="4" maxlength="5" readonly value="34.99">
</div>
<div id="txt_35" style="position:absolute; left:154px; top:326px; width:56px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_24"><P class="Normal-P"><span class="Normal-C">Shipping</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:326px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_24" name="Ship" size="4" maxlength="1" readonly value="0">
</div>
<div id="txt_36" style="position:absolute; left:154px; top:356px; width:68px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_26"><P class="Normal-P"><span class="Normal-C">Total Cost</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:356px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_26" name="totcost" size="4" maxlength="7" readonly value="">
</div>
<div style="position:absolute; left:161px; top:427px; width:96px; height:22px; text-align:left;">
<input type="button" id="butn_5" name="Calculate" value="Calculate" onclick="invoicecalc ()">
</div>
<div id="txt_37" style="position:absolute; left:154px; top:386px; width:53px; height:22px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<label for="edit_27"><P class="Normal-P"><span class="Normal-C">Tax-<wbr>incl</span></P>
</label>
</div>
<div style="position:absolute; left:260px; top:386px; width:50px; height:22px; text-align:left;">
<input type="text" id="edit_27" name="tax" size="4" maxlength="5" readonly value="">
</div>
</div></center>
<script type "text/javascript"> //declare language
function invoicecalc () { //name the function
var q1= parseInt(document.forms['form_2'].elements['edit_19'].value); //get Qty1 input
var q2= parseInt(document.forms['form_2'].elements['edit_20'].value); //get Qty2 input
var q3= parseInt(document.forms['form_2'].elements['edit_22'].value); //get Qty3 input
var q4= parseInt(document.forms['form_2'].elements['edit_23'].value); //get Qty4 input
var totalquant= (q1+q2+q3+q4); //add them together
document.forms['form_2'].elements['edit_21'].value=totalquant; //set the Total Qty box
var unitcost= (document.forms['form_2'].elements['edit_25'].value); //get UnitCost input
var shipcost= (document.forms['form_2'].elements['edit_24'].value); //get ShipCost input
var totalcost= (totalquant * unitcost) + shipcost; //calculate Total Cost
var taxincl=(totalcost/1.175)* 0.175 ; //calculate tax included in Total Cost
document.forms['form_2'].elements['edit_27'].value=taxincl.toFixed(2); //set the Tax-Incl box to 2-decimal places
document.forms['form_2'].elements['edit_26'].value=totalcost; //set the TotalCost box ... Won't accept 'toFixed' command
alert ("Total Cost is "+totalcost+" For "+totalquant+" Items"); //put message on screen
} //end function

</script>
</body>
</form>
</html>

brandonH · 09-13-2006, 09:42 PM

try doing this:

when you set the variable totalcost:
var totalcost= (totalquant * unitcost) + shipcost; //calculate Total Cost

after setting the variable, reset it like so:
totalcost=totalcost.toFixed(2)

joeasley · 09-14-2006, 12:28 AM

Thank you Brandon,
Sadly, tried this and get the Error message: "Object doesn't support this property or method."
Joe

mrhoo · 09-14-2006, 03:56 AM

All form input values are strings.

toFixed is a method of the number object.
You need to convert strings to numbers.

joeasley · 09-14-2006, 08:40 PM

Sounds very interesting. Many thanks, I'll try it out ASAP.

joeasley · 09-14-2006, 11:41 PM

Great!! As you rightly said, the problem was in the parsing

I was bogged down in Forms/Frames/Bodies and Loops and convinced that I couldn't output 2-variables in one pass. How stupid!

The error was in the line:
var totalcost= (totalquantity * unitcost + shipcost);
The equation contains a + operator which I now know concatenates strings.
I changed it to:
var totalcost=parseFloat(totalquantity * unitcost + shipcost);

then added the .toFixed modifier on the end of the output line thus:
document.forms['form_2'].elements['edit_26'].value=totalcost.toFixed(2);
... and it worked!!

I've just wasted 6-days of my life on this and I can hardly believe it!!
Many thanks again
Joe