Содержит список текстовых полей в jQuery

Question

У меня есть форма, в которой есть текстовые поля, добавленные динамически с помощью jquery. Идентификатор текстового поля формируется как массив, т. Е. Количество [0], количество [1], количество [2] ...

Я хочу добавить цифры в эти текстовые поля (-ы) и отобразить значение в другом текстовое поле с именем «total_quantity» предпочтительно, когда фокус смещается из текстового поля массива.

Как я могу это сделать? Я не против использования jQuery или простого javascript, который когда-либо проще.

Answer 1

Я бы предложил дать общий класс для ваших полей количества, что:

<input type="text" class="quantity" onblur="calculateTotal();" /> 

Тогда вы могли бы определить следующую функцию с JQuery:

function calculateTotal() { 
    var total = 0; 

    $(".quantity").each(function() { 
     if (!isNaN(this.value) && this.value.length != 0) { 
      total += parseFloat(this.value); 
     } 
    }); 

    $("#total_quantity").val(total); 
} 

onblur событие будет срабатывать каждый раз, когда фокус смещается от полей количества. В свою очередь, это вызовет функцию calculateTotal().

---

Если вы не хотите добавить общий класс, вы можете использовать селектор $("input[id^='Quantity[']") как Felix предложить в комментарии ниже. Это будет соответствовать всем текстовым полям, которые имеют идентификатор, начиная с: Quantity[

Answer 2

var Total = 0; 
$("input[id^='Quantity[']").each(function() { Total += $(this).val()|0; }); 
$("#total_quantity").val(Total); 

Answer 3

Используйте следующую функцию, если нельзя использовать document.getElementsByName(), так как некоторые рамки MVC, такие как Struts и использование Spring MVC атрибут имени текста для привязки элемента к второстепенному объекту.

function getInputTypesWithId(idValue) { 
    var inputs = document.getElementsByTagName("input"); 
    var resultArray = new Array(); 

    for (var i = 0; i < inputs.length; i++) { 
     if(inputs[i].getAttribute("id") == idValue) { 
      resultArray.push(inputs[i]); 
     } 
    } 
    return resultArray; 
}