Функция jquery для суммирования текстовых полей, которые имеют 2 класса

Question

Я пытаюсь добавить группу текстовых полей с помощью jquery. Каждое текстовое поле имеет класс (класс1) для его стилизации с использованием бутстрапа. Я добавляю дополнительный класс (класс2) для запуска функции jquery. Вот пример того, как выглядят два текстовых поля.

<input type="text" class="class1 class2" name="textbox1" id="textbox1 /> 
<input type="test" class="class1 class2" name="textbox2" id="textbox2 /> 

И вот моя функция jquery. GrandTotal является идентификатором текстового поля для хранения суммы.

$('.class2').keyup(function() { 
    var sum = 0; 

    $('.class2').each(function() { 
    sum += Number($(this).val()); 
    }); 

    $('#GrandTotal').val(sum); 

}); 

Это не работает. Я не получаю результата в #GrandTotal. Может ли кто-нибудь сказать мне, что я делаю неправильно? Заранее спасибо за вашу помощь.

cdr6800

Answer 1

Вы должны подтвердить, что вход числовой, в противном случае вы получите NaN (не число). JavaScript имеет isNaN() функция для проверки данного входа NaN или нет.

$('input.class2').keyup(function() { 
    var sum = 0; 

    $('input.class2').each(function() { 
    var value = Number($(this).val()); 
    if(!isNaN(value)) { 
     sum += value; 
    } 
    }); 

    $('#GrandTotal').val(sum); 
}); 

в действии: https://jsfiddle.net/ibrahimeymenduran/ymnu9hf4/

Answer 2

Ваш HTML не является действительным.

<input type="test" class="class1 class2" name="textbox2" id="textbox2 /> 

► тип = "текст" не "тест"

► Вы не закрывать идентификатор с двойными кавычками.

$(document).ready(function() { 
 

 
    $('.class2').keyup(function() { 
 
    var sum = 0; 
 

 
    $('.class2').each(function() { 
 
     sum += Number($(this).val()); 
 
    }); 
 

 
    $('#GrandTotal').val(sum); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="class1 class2" name="textbox1" id="textbox1"> 
 
<input type=" text " class="class1 class2 " name="textbox2 " id="textbox2"> 
 
<input type=" text " name="textbox3 " id="GrandTotal">

Answer 3

Вы можете сделать это даже без JQuery, в простом JavaScript.

var GrandTotal = document.getElementById("GrandTotal"); 
 
var values = [0, 0]; 
 

 
function updateTotal(element, index) { 
 
    element.onkeyup = function() { 
 
    if (!isNaN(element.value)) { 
 
     values[index] = parseInt(element.value || 0); 
 
    } 
 
    GrandTotal.textContent = values[0] + values[1]; 
 
    } 
 
} 
 

 
Array.prototype.forEach.call(document.getElementsByClassName('class2'), updateTotal);

<input type="text" class="class1 class2" name="textbox1" id="textbox1" /> 
 
<input type="test" class="class1 class2" name="textbox2" id="textbox2" /> 
 
<p id="GrandTotal"></p>

• Array.from(document.getElementsByClassName('class2')).forEach(updateTotal); получает вас массив элементов с классом class2. forEach звонки updateTotal для каждого из них.
• updateTotal принимает element, который будет элементом, который изменился, и index, чтобы указать, является ли он первым или вторым из ваших <input/> s.
• Внутри element.onkeyup мы проверяем, имеет ли данное значение <input/> значение, отличное от NaN. Если это так, мы помещаем числовое значение (или 0) в соответствующее положение в массив values. Затем мы обновим текст #GrandTotal.

Таким образом, значение #GrandTotal всегда будет обновляться при изменении каждого <input/> «s, если она не изменится на недопустимое значение, в этом случае он будет держать последнее действительное значение для него.