Click here to Skip to main content
14,661,551 members
Rate this:
Please Sign up or sign in to vote.
Problem

How to get quantity multiply price in amount textbox by jquery asp.net .

I work on web application web form asp.net .

AND I need to get qunatity * price and result display on Amount

when i try to do that i get error
JavaScript runtime error: Unable to get property 'children' of undefined or null


reference .


this error on line
var quantity = tableRows[2].children[0].innerHTML;


What I have tried:

 <script src="scripts/jquery-3.3.1.js"></script>
    <script src="scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 $(function () {

        $(".CssPrice").on('change keyup paste', function () {

       

            var textBox = this;
            var Price = $(textBox).val();
            var tableRows = $(textBox).parent().parent().parent().parent().children();

            if (Price != "") {
                var quantity = tableRows[2].children[0].innerHTML;

                var itemTotal = price * quantity;

                tableRows[4].children[0].innerHTML = itemTotal;
            }
            else
                tableRows[4].children[0].innerHTML = "";
        });
    });
</script>

   <asp:GridView ID="GridItems" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridItems_RowDataBound" OnRowEditing="OnRowEditing" OnRowCancelingEdit="OnRowCancelingEdit" OnDataBound="GridItems_DataBound" >
        <Columns>
         <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
         
          
            <asp:TemplateField HeaderText="ItemCode">
                <ItemTemplate>
       
              <asp:DropDownList ID="ddlItemCode" runat="server" Width="150px" AutoPostBack="true"  >
                        </asp:DropDownList>

                </ItemTemplate>
               
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="TxtQuantity" runat="server"  Text='<%# Bind("Quantity") %>' ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Price">
                <ItemTemplate>
                    <asp:TextBox ID="TxtPrice" runat="server" Text='<%# Bind("Price") %>'  OnTextChanged="TxtPrice_TextChanged" AutoPostBack="true" CssClass="CssPrice" ></asp:TextBox>
                </ItemTemplate>
                  
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Amount" >
                <ItemTemplate>
                    <asp:TextBox ID="TxtAmount" runat="server"  Text='<%# Bind("Amount") %>'   >
                    </asp:TextBox>
                </ItemTemplate>
               
            </asp:TemplateField>
            
        </Columns>
    </asp:GridView>
Posted
Updated 28-Sep-18 5:02am
Comments
F-ES Sitecore 28-Sep-18 8:19am
   
tableRows[2] will be null. You're going 5 times up the element tree to get the rows but you have to appreciate that js runs on the *client*, it runs on the html that your .net code produces. So view the source of your page, find your text box, then look at its parent.parent.parent and so on and see it relates to the item you're looking for. If not adjust your js accordingly to match the html that is actually produced.
ahmed_sa 28-Sep-18 10:11am
   
CAN YOU WRITE THAT BY CODE
ahmed_sa 28-Sep-18 10:43am
   
can you help me by solving this problem by any source code by jquery

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Set a class attribute for your TextBoxes so you can easily reference them. For example:

ASPX (I filtered your markup for clarity):
<asp:GridView ID="GridItems" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField HeaderText="Price">
                <ItemTemplate>
                    <asp:TextBox ID="TxtPrice" runat="server" Text='<%# Bind("Price") %>' CssClass="CssPrice" ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="TxtQuantity" runat="server" CssClass="CssQty"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Amount" >
                <ItemTemplate>
                    <asp:TextBox ID="TxtAmount" runat="server" CssClass="CssAmount">
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>


Then in your jQuery, you can calculate the amount based on the quantity entered, you can do something like this:

$(".CssQty").change(function() {
  //access the Texbox using the class name
  var tbPrice = $(this).parent("td").parent("tr").find(".CssPrice");
  var tbAmount = $(this).parent("td").parent("tr").find(".CssAmount");
  
  //calculathe the value of Price and Quantity 
  //Note: You may need to do some validation to allow only numeric values for calculation
  var amount = parseFloat(tbPrice.val()) * parseInt($(this).val());
  tbAmount.val(amount);
});


Here's another approach that I've written awhile back that might help too: How To: Do Calculations in GridView
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100