Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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">
    <!--Serif WebPlus 10 HTML Export-->
    <!--Supports HTML 4.01-->
    <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">
    <!--
    body {margin: 0px; padding: 0px;}
    .Normal-P
    {
    margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
    }
    .Normal-C
    {
    font-family:"Times New Roman", serif; font-size:16.0px;
    line-height:1.25em;
    }
    -->
    </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>

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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)
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Brandon,
    Sadly, tried this and get the Error message: "Object doesn't support this property or method."
    Joe

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    All form input values are strings.

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

  • #5
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sounds very interesting. Many thanks, I'll try it out ASAP.

  • #6
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •