Calculate total using jQuery

[ypdev2]

Hi,

I am using jQuery function to calculate total of item price (label) multiply by quantity (textbox), this is working fine so far.
Also, I added additional label for shipping which getting the data from rbl object, also working fine.

The calculation I'm trying to get is sum of total+shipping, once I add this code i'm getting strange numbers on the total label.

Here is the total+shipping code:
$("[id*=lblTotalFishShipping]").html(parseFloat($(".sumOrder").html()) + parseFloat($("[id*=lblTotalFishShipping]").html()));

Here is the full function:

<script type="text/javascript">
    $(function () {
        $("[id*=quoteOrderAmount]").val("0");
    });

    $("[id*=quoteOrderAmount]").live("change", function () {
        if (isNaN(parseInt($(this).val()))) {
            $(this).val('0');
        } else {
            $(this).val(parseInt($(this).val()).toString());
        }
    });

    $("[id*=quoteOrderAmount]").live("keyup", function () {
        if (!jQuery.trim($(this).val()) == '') {
            if (!isNaN(parseFloat($(this).val()))) {
                var row = $(this).closest("tr");
                $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
                $("[id*=lblTotalFishShipping]").html(parseFloat($(".sumOrder").html()) + parseFloat($("[id*=lblTotalFishShipping]").html()));
            }
        } else {
            $(this).val('');
        }

        var grandTotal = 0;

        $("[id*=lblTotal]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());

        });
        $("[id*=lblGrandTotal]").html(grandTotal.toString());


   });


</script>

Here is the html:

        <table border="1" frame="border" width="350px">
            <tr>
                <td class="style9" colspan="2">Order Summary (estimated)</td>
            </tr>
            <tr>
                <td class="style8">Grand Total (fish):</td>
                <td class="style10">$<asp:Label ID="lblGrandTotal" runat="server" Text="0" CssClass="sumOrder"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="style8">Shipping:</td>
                <td class="style10">$<asp:Label ID="lblShipping" runat="server" Text="0" CssClass="sumOrder"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="style4">Total (USD):</td>
                <td class="style11">$<asp:Label ID="lblTotalFishShipping" runat="server" Text="0"></asp:Label>
                </td>
            </tr>
        </table>

Can you please help me to understand why it doesn't work?

Many Thanks,
YP

[pixelsoul]

The calculation I'm trying to get is sum of total+shipping, once I add this code i'm getting strange numbers on the total label.

I am confused a little here, you mean that you're trying to get the sum of Grand Total (fish) + Shipping right? And then put that value into the Total (USD)?

I just ask because it doesn't make much sense to add up lblGrandTotal + lblTotalFishShipping if the id lblTotalFishShipping is where the final summed up total is going to be.

So it should probably be something like this instead:
$("[id*=lblTotalFishShipping]").html(parseFloat($("[id*=lblGrandTotal]").html()) + parseFloat($("[id*=lblShipping]").html()));

[ypdev2]

Sorry, probably a typo.

I'm able to see a number in lblTotalFishShipping but the problem is this:
when increase product quantity via quoteOrderAmount textbox, total number I get is OK.. However, when I decrease product quantity (back to 0) the number in lblGrandTotal is decreased, not sure why.

When I remove the following line, then calculation works fine but without the data of lblTotalFishShipping:
$("[id*=lblTotalFishShipping]").html(parseFloat($("[id*=lblGrandTotal]").html()) + parseFloat($("[id*=lblShipping]").html()));

Any idea? or any other way to do it?

Thanks for your help.

[diafol]

The asp is a bit difficult for us non-asp'ers, any chance you could print the html that's output in the browser (view source).

[ypdev2]

Yup, here it is..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript"> 
       <!--

       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }


       -->
</script>




<link href="css/ValidationEngine.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine-en.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js" charset="utf-8"></script>

<script type="text/javascript"> 
    $(function () {
        $("#form1").validationEngine('attach', { promptPosition: "centerRight" });
    });


     $(function () {
        //Attach the validate class to each RadioButton.
        $("table[id*=txt_DeliveryOptions]").validationEngine('attach', { promptPosition: "centerRight" });
        $("table[id*=txt_DeliveryOptions] input").addClass("validate[required]");
        $("[id*=Button1]").bind("click", function () {
            if (!$("table[id*=txt_DeliveryOptions]").validationEngine('validate')) {
                return false;
            }
            return true;
        });
    });

</script>




<script type="text/javascript"> 
    $(function () {
        $("[id*=quoteOrderAmount]").val("0");
    });

    $("[id*=quoteOrderAmount]").live("change", function () {
        if (isNaN(parseInt($(this).val()))) {
            $(this).val('0');
        } else {
            $(this).val(parseInt($(this).val()).toString());
        }
    });

    $("[id*=quoteOrderAmount]").live("keyup", function () {
        if (!jQuery.trim($(this).val()) == '') {
            if (!isNaN(parseFloat($(this).val()))) {
                var row = $(this).closest("tr");
                $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
                $("[id*=lblTotalFishShipping]").html(parseFloat($("[id*=lblGrandTotal]").html()) + parseFloat($("[id*=lblShipping]").html()));
            }
        } else {
            $(this).val('');
        }

        var grandTotal = 0;

        $("[id*=lblTotal]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());

        });
        $("[id*=lblGrandTotal]").html(grandTotal.toString());


   //});


//        var sumTotal = 0;

//        $("[id*=lblTotal]").each(function () {
//            sumTotal = sumTotal + parseFloat($(this).html()) + parseFloat($("[id*=lblShipping]").html());

//        });
//        $("[id*=lblTotalFishShipping]").html(sumTotal.toString());


   });


</script>



<script type="text/javascript"> 

    $(document).ready(function() {

       $('#txt_shippingDestination input').click(function()
       {
            var selected= $("#txt_shippingDestination input:radio:checked").val();

            if(selected == "Manhattan") 
            {
              $("#lblShipping").text('15');
            }
            else if(selected == "Bronx") 
            {
              $("#lblShipping").text('15');
            }
            else if(selected == "Brooklyn") 
            {
              $("#lblShipping").text('15');
            } 
            else if(selected == "Queens") 
            {
              $("#lblShipping").text('21');
            } 
            else if(selected == "Staten Island") 
            {
              $("#lblShipping").text('37');
            }                                                 
       });
});

</script>




    <title>Quotation Request</title>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 175px; font-family:Verdana; font-size:12px; color:#294E89;
        }
        .style3
        {
            width: 175px;
            font-family: Verdana;
            font-size: 12px;
            color: #294E89;
            font-weight: bold;
        }
        .style4
        {
            font-family:Verdana; font-size:13px; color:#294E89; font-weight: bold;  background: #ffff00; width:175px;
        }        
        .style5
        {
            font-family:Verdana; font-size:12px; color:#294E89;
        }        
        .style6
        {
            width: 480px;
            font-family: Verdana;
            font-size: 12px;
            color: #b94421;            
        }
        .style7
        {
            font-family: Verdana;
            font-size: 12px;
            color: #b94421;
            width: 236px;
        }
        .style8
        {
            font-family:Verdana; font-size:13px; color:#294E89; font-weight: bold; width: 175px;
        }
        .style9
        {
            font-family:Verdana; font-size:15px; color:white; font-weight: bold; background: #294E89; text-align:center;
        }        
        .style10
        {
            font-family:Verdana; font-size:13px; color:#b94421; font-weight: bold;
        }   
        .style11
        {
            font-family:Verdana; font-size:13px; color:#b94421; font-weight: bold;  background: #ffff00;
        }    

    </style>








</head>
<body>

    <form name="form1" method="post" action="QuotationReq.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="zLMHBoYjSP4w1Cbc2RWpZYbQP1ENHwwJ1v5uNPgPp9t6GAY7Zwg//8mMHQoOMM1ED6tHVxhyqdxKXlh6hGpStDAmCeTFVP2oz+hMsiea2dxfjbi7Etm7/55SVAGnBTgPdXOyOMkwbO1Axxp8A1f0d2rbLIxdJsj1qbL08LVnQfWRrrR1xoI6q3xgHeEZbODlXsA4LQ166z9xOIpeKo54Dn6SzPMye/yQIC4bdJtIhjJyBc4T6vYATC3fDAhPT4CUaL9fu6OHMUDN1MPgO5YCbGknpMXmECkekqLOBhXKe12IgBb1u3x1mLwgEseY4vKV8ap3DKMQQ4gWR7fHPZVxmSX+W7x0VX/E42lgwQHOOp6wwDhrf90GuezmwvhUXZVWueVrWMNBVHV6TUh0RXMM8qZkq8r5z8qwR1GPK6d3nIDZQAzka976I27GLlqRJWQthhq4WMLvHOdIeOpEnkgcfR+f5TPWT9O4AMd6ju/DGr1j0CYfdT3TVctu//HY/5NH2BEJ2/BKm46fH8QmgOYiKUOafQJ3dYudm8BZL3xhuU+SHqCW4RZx3KbAe4Yk5cKq9n4jWqtdLjueRgKre+OwsWN9TPT1E7szuorATqKCcSkGLs+mIEMQs3EsO7j0BOpCR31hoQahm/7gpiYoZq+DvobkhDfruDNUcdAsR8o2mpwxZpj5Lv8cykc8Ja6WckemcZmcS6Xf9JtwfgPHgKS8SE6vIKw61c7c92VZiJYBh1m0JKc6TYayM7scNoXWkEosT1VUVfzGqauXkzx/1nfGeZ/U+Z+WcF9kfI8CkQAQ+voP6+L57w0I+/zhvWTRdpI9sLELuv20/duFqSSdemeIVZFtVDA26oPkz36jvdfIxDWhRbzSE2VsutasdG7j5u25E965xO/JNzEP1xuJOQTf/iybjcC98BMz3vy5RcHGJcc+j95TGMBLT8D1sibg71Lv+LrjK2N7O7ut86C6guuVdA==" />
</div>

<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div>

    <input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="Ykug7kX8W16xlJwmimf7C8Tdlfc3o+q4UErcNTRxjhFLV3402jVZtCBd1EoQMsq+95NpgE1iR7+vMD8OHVzH7EOW5eqJ+GBKDVII3GOL0LPdbezgl6XuawypIY0JsQ9vCNbzchsrQQWrKEy94ab7n4IWDH77ER7bSy7QxzIIzq/fzFg9bscvCr7VlkZoa+eGuSHSbs9uhT80KRfpyQKbxwnmv4tD7HXmp8JiCLR1nfW1dNNYJLnhsjrgSsFMJuMC" />
</div>
    <table class="style1">
        <tr>
            <td style="font-family:Verdana; font-size:18px; font-weight:bold; color:#5D7B9D; background-color:#012640;">
            <img alt="" src="Design/logo800.gif" />
            </td>
        </tr>
        <tr>
            <td><br /></td>
        </tr>        
        <tr>
            <td style="font-family:Verdana; font-size:18px; font-weight:bold; color:#5D7B9D;">Quotation Form</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td style="font-family:Verdana; font-size:12px; font-weight:bold; color:#294E89;">Please fill-out the form below and submit to us.</td>
        </tr>
        <tr>
            <td style="font-family:Verdana; font-size:12px; font-weight:bold; font-style:italic; color:#294E89;">
                Note: Our sales team will be contact you within 24 hours during regular 
                business days.</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
        </tr>
    </table>
    <table class="style1">
        <tr>
            <td class="style3">
                Contact Details</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style2">
                First Name:</td>
            <td>
        <input name="txt_FirstName" type="text" id="txt_FirstName" class="validate[required]" />
            </td>
        </tr>
        <tr>
            <td class="style2">
                Last Name:</td>
            <td>
                <input name="txt_LastName" type="text" id="txt_LastName" class="validate[required]" />
            </td>
        </tr>
        <tr>
            <td class="style2">
        Phone Number 1:</td>
            <td>
        <input name="txt_Phone1" type="text" id="txt_Phone1" class="validate[required,custom[phone],maxSize[16],minSize[8]]" onkeypress="return isNumberKey(event)" />
            </td>
        </tr>
        <tr>
            <td class="style2">
        Phone Number 2:</td>
            <td>
        <input name="txt_Phone2" type="text" id="txt_Phone2" onkeypress="return isNumberKey(event)" />
            </td>
        </tr>
        <tr>
            <td class="style2">
                Email:</td>
            <td>
        <input name="txt_email" type="text" id="txt_email" class="validate[required,custom[email]]" />
            </td>
        </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style3">
                Shipping Information</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style2">Building Address:</td>
            <td>
                <textarea name="txt_Address" rows="2" cols="20" id="txt_Address"></textarea>
            </td>
        </tr>
        <tr>
            <td class="style2">Apt / Suite / Other:</td>
            <td>
                <span id="txt_AptSuite"><input id="txt_AptSuite_0" type="radio" name="txt_AptSuite" value="Apt" onclick="javascript:setTimeout('__doPostBack(\'txt_AptSuite$0\',\'\')', 0)" /><label for="txt_AptSuite_0">Apt</label><input id="txt_AptSuite_1" type="radio" name="txt_AptSuite" value="Suite" onclick="javascript:setTimeout('__doPostBack(\'txt_AptSuite$1\',\'\')', 0)" /><label for="txt_AptSuite_1">Suite</label><input id="txt_AptSuite_2" type="radio" name="txt_AptSuite" value="Other:" onclick="javascript:setTimeout('__doPostBack(\'txt_AptSuite$2\',\'\')', 0)" /><label for="txt_AptSuite_2">Other</label></span>
&nbsp;

            </td>
        </tr>
        <tr>
            <td class="style2">
                City:</td>
            <td>
                <input name="txt_City" type="text" id="txt_City" />
            </td>
        </tr>
        <tr>
            <td class="style2">
                State:</td>
            <td>
        <input name="txt_State" type="text" id="txt_State" />
            </td>
        </tr>
        <tr>
            <td class="style2">
                Zip Code:</td>
            <td>
        <input name="txt_Zip" type="text" id="txt_Zip" />
            </td>
        </tr>
        <tr>
            <td class="style2">
                Country:</td>
            <td>
        <input name="txt_Country" type="text" id="txt_Country" />
            </td>
        </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style2">
                Delivery Options:</td>
            <td class="style5">
                <table id="txt_DeliveryOptions" border="0">
    <tr>
        <td><input id="txt_DeliveryOptions_0" type="radio" name="txt_DeliveryOptions" value="Deliver to my shipping address" onclick="javascript:setTimeout('__doPostBack(\'txt_DeliveryOptions$0\',\'\')', 0)" /><label for="txt_DeliveryOptions_0">Deliver to my shipping address</label></td><td><input id="txt_DeliveryOptions_1" type="radio" name="txt_DeliveryOptions" value="Self Pickup from local distribution center" onclick="javascript:setTimeout('__doPostBack(\'txt_DeliveryOptions$1\',\'\')', 0)" /><label for="txt_DeliveryOptions_1">Self Pickup from local distribution center</label></td>
    </tr>
</table>
            </td>
        </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td>
                <table cellspacing="1" class="style6">
                    <tr>
            <td class="style7">
                <table id="txt_shippingDestination" disabled="disabled" border="0">
    <tr>
        <td><span disabled="disabled"><input id="txt_shippingDestination_0" type="radio" name="txt_shippingDestination" value="Manhattan" disabled="disabled" /><label for="txt_shippingDestination_0">Manhattan</label></span></td>
    </tr><tr>
        <td><span disabled="disabled"><input id="txt_shippingDestination_1" type="radio" name="txt_shippingDestination" value="Bronx" disabled="disabled" /><label for="txt_shippingDestination_1">Bronx</label></span></td>
    </tr><tr>
        <td><span disabled="disabled"><input id="txt_shippingDestination_2" type="radio" name="txt_shippingDestination" value="Brooklyn" disabled="disabled" /><label for="txt_shippingDestination_2">Brooklyn</label></span></td>
    </tr><tr>
        <td><span disabled="disabled"><input id="txt_shippingDestination_3" type="radio" name="txt_shippingDestination" value="Queens" disabled="disabled" /><label for="txt_shippingDestination_3">Queens</label></span></td>
    </tr><tr>
        <td><span disabled="disabled"><input id="txt_shippingDestination_4" type="radio" name="txt_shippingDestination" value="Staten Island" disabled="disabled" /><label for="txt_shippingDestination_4">Staten Island</label></span></td>
    </tr>
</table>

            </td>
                        <td>
                <span id="txt_destributionAddress" disabled="disabled">Please note that our distribution center located at: <br><br><b>AMC<br>Room 303 <br>New York, NY 11936</b></span>
                            </td>
                    </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>                    
                </table>
            </td>
        </tr>        
        <tr>
            <td class="style2">
                Comments:</td>
            <td>
                <textarea name="txt_userComments" rows="2" cols="20" id="txt_userComments"></textarea>
            </td>
        </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>                
    </table>


    <p>
        <div>
    <table cellspacing="0" cellpadding="2" rules="all" border="1" id="stockProducts" style="color:#333333;border-collapse:collapse;">
        <tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
            <th scope="col">Tangan cichlids (Tank raised)</th><th scope="col">Size (cm)</th><th scope="col">Price ($)</th><th scope="col">Availability</th><th scope="col">Sex Identification</th><th scope="col">Comments</th><th scope="col">Image</th><th scope="col" style="color:#294E89;background-color:#E9E6C4;">Quantity?</th><th scope="col">Total ($)</th>
        </tr><tr style="color:#333333;background-color:#F7F6F3;">
            <td>Altolamprologus Calvus Black Sumbu</td><td>3-4</td><td class="price">14</td><td>&nbsp;</td><td>NO</td><td>*SOON</td><td>&nbsp;</td><td>
                        <input name="stockProducts$ctl02$quoteOrderAmount" type="text" value="0" maxlength="4" id="stockProducts_ctl02_quoteOrderAmount" onkeypress="return isNumberKey(event);" style="background-color:#E9E6C4;width:50px;" />
                    </td><td>
                        <span id="stockProducts_ctl02_lblTotal">0</span>
                    </td>
        </tr><tr style="color:#284775;background-color:White;">
            <td>Altolamprol Sumbu</td><td>5-7</td><td class="price">17</td><td>&nbsp;</td><td>NO</td><td>&nbsp;</td><td>&nbsp;</td><td>
                        <input name="stockProducts$ctl03$quoteOrderAmount" type="text" value="0" maxlength="4" id="stockProducts_ctl03_quoteOrderAmount" onkeypress="return isNumberKey(event);" style="background-color:#E9E6C4;width:50px;" />
                    </td><td>
                        <span id="stockProducts_ctl03_lblTotal">0</span>
                    </td>
        </tr>
    </table>
</div>



    </p>




        <table border="1" frame="border" width="350px">
            <tr>
                <td class="style9" colspan="2">Order Summary (estimated)</td>
            </tr>
            <tr>
                <td class="style8">Grand Total (fish):</td>
                <td class="style10">$<span id="lblGrandTotal" class="sumOrder">0</span>
                </td>
            </tr>
            <tr>
                <td class="style8">Shipping:</td>
                <td class="style10">$<span id="lblShipping" class="sumOrder">0</span>
                </td>
            </tr>
            <tr>
                <td class="style4">Total (USD):</td>
                <td class="style11">$<span id="lblTotalFishShipping">0</span>
                </td>
            </tr>
        </table>
&nbsp;

     <p>
        <input type="submit" name="btnSendMail" value="Submit" id="btnSendMail" style="font-weight:bold;" />
    </p>
    <div>

    </div>
    </form>








</body>
</html>





<script type="text/javascript"> 
   var TargetBaseControl = null;

   window.onload = function()
   {
      try
      {
         //get target base control.
         TargetBaseControl = 
           document.getElementById('stockProducts');
      }
      catch(err)
      {
         TargetBaseControl = null;
      }
   }

   function TestCheckBox()
   {              
      if(TargetBaseControl == null) return false;

      //get target child control.
      var TargetChildControl = "productSelector";

      //get all the control of the type INPUT in the base control.
      var Inputs = TargetBaseControl.getElementsByTagName("input"); 

      for(var n = 0; n < Inputs.length; ++n)
         if(Inputs[n].type == 'checkbox' && 
            Inputs[n].id.indexOf(TargetChildControl,0) >= 0 && 
            Inputs[n].checked)
          return true;        

      alert('Please select products from the list below...');
      return false;
   }
</script>

[stbuchok]

Stupid question, why not just add it up in .Net? Why do you need to use javascript?