Как перебирать текстовые поля ASP .NET с помощью JavaScript и вычислять значение?

Question

У меня есть несколько текстовых полей в повторителе, и я буду вводить значение в эти текстовые поля во время выполнения. и я хочу, чтобы сумма всех значений, введенных в эти текстовые поля в одной метке. Я хочу сделать это с помощью сценария Java. так что вы можете помочь мне.

Answer 1

Вот одна из идей, с которой можно начать:

1. Поместите <div> вокруг вашего Repeater и дайте ему уникальный id.
2. Используйте document.getElementById() функция в JavaScript для получения ссылки на этот <div>.
3. Используйте функцию getElementsByTagName() в элементе DOM, чтобы найти все <input> s в.
4. Зацикливайтесь на них, добавляяих значения (анализируются как целые числа) вместе.

Поэтому, если ваша разметка выглядит примерно так:

<div id="coolStuff">
    <asp:Repeater ... >
</div>

JavaScript выглядит примерно так:

var container = document.getElementById("coolStuff");
var inputs = container.getElementsByTagName("input");

var sum = 0;

for (var i = 0; i < inputs.length; i++) {
    sum += inputs[i].value;
}

alert(sum);

Теперь этот код не проверяет, чтобы убедиться, что <input> s на самом деле имеют значение type=text, или чтобы подтвердить, что введенные значения являются числами.Эти части оставлены как упражнения для читателя;)

---

Редактировать: Если у вас есть несколько текстовых полей в каждой «строке», выводимых Repeater, и вы хотите толькоСуммируя значения для одной «группы» ящиков, вам нужно будет немного изменить скрипт.Вот два возможных решения - выберите одно:

1. Если вы точно знаете, сколько элементов <input> имеется в каждой «строке», вы можете изменить цикл for в клиентескрипт для посещения только каждого N-го элемента.Например.чтобы выбрать только последнее из трех полей в каждой строке: for (var i = 2; i < inputs.length; i += 3)

2. Измените разметку, включив атрибут class в элементах <input>, которые будут частью суммы.В цикле for выполните проверку на inputs[i].className, чтобы проверить, нужно ли включить конкретное поле.

Answer 2

Примерно так, предполагая, что вы хотите суммировать все текстовые поля в элементе управления повторителем. Это также будет суммировать только числовые значения.

var repeater = document.getElementById('repeater_id');
var inputs = repeater.getElementsByTagName('input');
var sum = 0;
for (var i=0; i < inputs.length; i++) {
    if (inputs[i].type === "text" && /^\d+$/.test(inputs[i].value)) {
        sum += inputs[i].value;
    }
}

Если вы делаете много вещей на стороне клиента, почему бы не взглянуть на это с помощью библиотеки, такой как jQuery.

Answer 3

Получить JQuery. Добавьте класс в текстовое поле в разметке повторителя, используя, например, CssClass = 'totals'. Используйте следующий код jQuery для суммирования значений

var total = 0;
$('input.totals').each(function(){

 if (!isNan($(this).text())) total += $(this).text()
});

alert('Total is ' + total);

Answer 4

<asp:Repeater ID="rpt" CssClass="rpt">
<itemTemplate>
  <asp:TextBox ID="txtValue" />
</itemTemplate>
<footerTemplate>
  <asp:Label Id="lblResult" CssClass="result" />
</footerTemplate>
</asp:Repeater>

JavaScript с использованием jQuery:

$(document).ready(function(){
  $('.rpt input[type=text]').live('onchange', calc);
});

function calc(){
  var result = 0;
 $('.rpt input[type=text]').each(function(){
  // need better input cleaning here...
  result += parseInt($(this).val());
  });
  $('.rpt .result').val(result);
}

НТН.