ahmed_sa Ответов: 1

Как получить количество умножить цену в текстовом поле Сумма с помощью jquery ASP.NET


Проблема

Как получить количество умножить цену в текстовом поле Сумма с помощью jquery asp.net -да .

Я работаю над веб-приложением web form asp.net -да .

И мне нужно вам количества * цену и отображать результат на сумму

когда я пытаюсь это сделать, я получаю ошибку
Ошибка выполнения JavaScript: не удалось получить свойство детей '' undefined или null


ссылка.


эта ошибка на линии
var quantity = tableRows[2].children[0].innerHTML;


Что я уже пробовал:

 <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>

F-ES Sitecore

tableRows[2] будет иметь значение null. Вы идете 5 раз вверх по дереву элементов, чтобы получить строки, но вы должны понимать, что js работает на *клиенте*, он работает на html, который создает ваш .net-код. Итак, просмотрите источник вашей страницы, найдите текстовое поле, затем посмотрите на его родитель.родитель.родитель и т. д. И посмотрите, как он относится к элементу, который вы ищете. Если нет, то отрегулируйте свой js соответствующим образом, чтобы он соответствовал фактически созданному html.

ahmed_sa

ВЫ МОЖЕТЕ НАПИСАТЬ ЭТО С ПОМОЩЬЮ КОДА

ahmed_sa

можете ли вы помочь мне решить эту проблему с помощью любого исходного кода jquery

1 Ответов

Рейтинг:
0

Vincent Maverick Durano

Установите атрибут класса для ваших текстовых полей, чтобы вы могли легко ссылаться на них. Например:

ASPX (я отфильтровал вашу разметку для ясности):

<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>


Затем в вашем jQuery вы можете рассчитать сумму на основе введенного количества, вы можете сделать что-то вроде этого:

$(".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);
});


Вот еще один подход, который я написал некоторое время назад, который тоже может помочь: Как сделать вычисления в GridView