Remove From My Forums

jquery auto calculation not performing on output page asp.net?

Question

User-1647172364 posted

Hlo Professionals!

In my code i am having 3 textboxes named quantity, price, final amount my requirement is when i fill qty and price value in textbox then multiplication will be performed and result will be shown in final amount textbox.

Here is my code

Please execute it.

Aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ManagePurchase.aspx.cs" Inherits="Store.ManagePurchase" %>

<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 <script type="text/javascript">
        function total() {
            var qty = 0;
            var price = 0;
            var qty = document.getElementById('#TB_qty').value;
            var price = document.getElementById('#TB_price').value;
            var total = 0;


    document.getElementById('#TB_final').value = qty * price;

            total = qty * price;
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentbody" runat="server">
<div class="row">
       
    
    
    
    <div class="col-sm-3">
  <span style="color:black;"><b>
                             
                 Select Product</b></span><br />
                   <span style="color:black; "> 
       <asp:dropdownlist ID ="dd3" runat="server" Width="240px" Height="30" DataTextField="product_name" DataValueField="uom" AutoPostBack="true" OnSelectedIndexChanged="dd3_SelectedIndexChanged" /></span><br />
          </div>
 <div class="row">
     <div class="col-sm-3">
  <span style="color:black;"><b>
                             
                  Quantity</b></span><br />
                   <span style="color:black; "> <asp:TextBox ID ="TB_qty" runat="server" Width="240px" ClientIDMode="Static"    /></span><br />
                
       </div>  
        <div class="col-sm-3">
  <span style="color:black;"><b>
                             
                  Price</b></span><br />
                   <span style="color:black; "> <asp:TextBox ID ="TB_price" runat="server" Width="240px" ClientIDMode="Static"  /></span><br />
                
       </div>  
</asp:Content>

Tuesday, September 8, 2020 9:00 AM

Answers

User-939850651 posted

Hi sanam13,

According to your description, I tried to test your code, but I did not find the text box with ID TB_final in your code. This is the reason why you can not get the result.

Regarding how to automatically calculate, you could try to use the jQuery keyup event.

Something like this:

<head runat="server">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#TB_qty,#TB_price').keyup(function () {
                var qty = $('#TB_qty').val() == "" ? 0 : Number($('#TB_qty').val());
                var price = $('#TB_price').val() == "" ? 0 : Number($('#TB_price').val());
                total = qty * price;
                $('#TB_final').val(total);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="contains">
            <div class="row">
                <div class="col-sm-3">
                    <span style="color: black;"><b>Quantity</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_qty" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
                <div class="col-sm-3">
                    <span style="color: black;"><b>Price</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_price" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
                <br />
                <div class="col-sm-3">
                    <span style="color: black;"><b>Total</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_final" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
            </div>
        </div>
    </form>
</body>

Result:

If I misunderstood something, please feel free let me know.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, September 8, 2020 10:34 AM

User-939850651 posted

Hi sanam13,

First, you need a text box with ID TB_final to display the calculated result.

Secondly, the function you define will not be triggered automatically, you need to set its trigger condition. Such as onchange, onkeyup, onblur, etc. And for your requirements, I think onkeyup is the best.

And when using document.getElementById(selector), you cannot add "#" sign before id.

<head runat="server">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <title></title>
    <script type="text/javascript">
        function total() {
            //var qty = 0;
           //var price = 0;
            var qty = document.getElementById('TB_qty').value;
            var price = document.getElementById('TB_price').value;
            var total = 0;
            document.getElementById('TB_final').value = qty * price;
            total = qty * price;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="contains">
            <div class="row">
                <div class="col-sm-3">
                    <span style="color: black;"><b>Quantity</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_qty" runat="server" Width="240px" ClientIDMode="Static" onkeyup="total()" /></span><br />
                </div>
                <div class="col-sm-3">
                    <span style="color: black;"><b>Price</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_price" runat="server" Width="240px" ClientIDMode="Static" onkeyup="total()" /></span><br />
                </div>
                <br />
                <div class="col-sm-3">
                    <span style="color: black;"><b>Total</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_final" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
            </div>
        </div>
    </form>
</body>

Hope this can help you.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, September 9, 2020 1:47 AM

All replies

User-939850651 posted

Hi sanam13,

According to your description, I tried to test your code, but I did not find the text box with ID TB_final in your code. This is the reason why you can not get the result.

Regarding how to automatically calculate, you could try to use the jQuery keyup event.

Something like this:

<head runat="server">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#TB_qty,#TB_price').keyup(function () {
                var qty = $('#TB_qty').val() == "" ? 0 : Number($('#TB_qty').val());
                var price = $('#TB_price').val() == "" ? 0 : Number($('#TB_price').val());
                total = qty * price;
                $('#TB_final').val(total);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="contains">
            <div class="row">
                <div class="col-sm-3">
                    <span style="color: black;"><b>Quantity</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_qty" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
                <div class="col-sm-3">
                    <span style="color: black;"><b>Price</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_price" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
                <br />
                <div class="col-sm-3">
                    <span style="color: black;"><b>Total</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_final" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
            </div>
        </div>
    </form>
</body>

Result:

If I misunderstood something, please feel free let me know.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, September 8, 2020 10:34 AM

0

Sign in to vote

User-1647172364 posted

Sir don't mold my code which i have provided u javascript code please made changes in that only and make it to run.

Thnx for ur understanding.

Tuesday, September 8, 2020 11:35 AM

User-939850651 posted

Hi sanam13,

First, you need a text box with ID TB_final to display the calculated result.

And when using document.getElementById(selector), you cannot add "#" sign before id.

<head runat="server">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <title></title>
    <script type="text/javascript">
        function total() {
            //var qty = 0;
           //var price = 0;
            var qty = document.getElementById('TB_qty').value;
            var price = document.getElementById('TB_price').value;
            var total = 0;
            document.getElementById('TB_final').value = qty * price;
            total = qty * price;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="contains">
            <div class="row">
                <div class="col-sm-3">
                    <span style="color: black;"><b>Quantity</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_qty" runat="server" Width="240px" ClientIDMode="Static" onkeyup="total()" /></span><br />
                </div>
                <div class="col-sm-3">
                    <span style="color: black;"><b>Price</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_price" runat="server" Width="240px" ClientIDMode="Static" onkeyup="total()" /></span><br />
                </div>
                <br />
                <div class="col-sm-3">
                    <span style="color: black;"><b>Total</b></span><br />
                    <span style="color: black;">
                        <asp:TextBox ID="TB_final" runat="server" Width="240px" ClientIDMode="Static" /></span><br />
                </div>
            </div>
        </div>
    </form>
</body>

Hope this can help you.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, September 9, 2020 1:47 AM

Answered by:

jquery auto calculation not performing on output page asp.net?

Question

Answers

All replies