Как вы добавляете значения из полей ввода и обновляете другое поле с результатом в jQuery?

Question

Преамбула: я больше похож на PHP / MySQL, только начинаю увлекаться javascript / jQuery, поэтому прошу прощения за этот тупой вопрос новичка. Не могу понять это из Документов.

У меня есть форма без кнопки отправки. Цель состоит в том, чтобы позволить пользователю вводить значения в несколько полей формы и использовать jQuery для суммирования их снизу в div. Форма выглядит примерно так, но красивее:

<form>
Enter Value: <input class="addme" type="text" name="field1" size="1">
Enter Value: <input class="addme" type="text" name="field2" size="1">
Enter Value: <input class="addme" type="text" name="field3" size="1">
etc.....
<div>Result:<span id="result"></span></div>
</form>

Возможно ли добавить это? И если да, то можно ли это сделать каждый раз, когда меняется одно из полей ввода?

Спасибо.

UPDATE: Брайан опубликовал классную песочницу для совместной работы, поэтому я отредактировал код так, чтобы он выглядел больше, чем у меня, и он здесь: http://jsbin.com/orequ/ для редактирования перейдите сюда: http://jsbin.com/orequ/edit

Answer 1

Вставьте это сразу после того, как тег </form> сделает это:

<script>
  function displayTotal() {
    var sum = 0

    var values = $('.addme').each(function(){
      sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
    });

    $('#result').text(sum);
  }
  $('.addme').keyup(displayTotal);
</script>

Вот демоверсия: http://jsbin.com/iboqo (редактируется через http://jsbin.com/iboqo/edit)

Answer 2

(function(){
    var context = $("form"), elements = $("input.addme", context);
    function getSum(elements) {
        var sum = 0;
        $(elements, context).each( function() {
            var v = parseInt(this.value);
            v === parseInt(v,10) ? sum += v : sum = sum;
        })
        return sum;
    }
    $(elements).bind("keyup", function() {
        $("#result").text( getSum(elements) );
    });
})();

изолированные контекст и контекст, включая работу с нецелыми значениями, функция getSum должна скорее возвращать значение, чем делать что-то сама.

Answer 3

Любые нечисловые или пустые значения будут игнорироваться при расчете (им будет присвоено нулевое значение, что не повлияет на сумму).

function sumValues() {
    var sum = 0;

    $("input.addme").each(function(){
        var $this = $(this);
        var amount = parseInt($this.val(), 10);
        sum += amount === "" || isNaN(amount)? 0 : amount;
    });

    $("#result").text(sum);
}

$(function() {

  sumValues();

  $("input.addme").keyup(function(){
    sumValues();
  });

});

Рабочая демоверсия

Answer 4

Попробуйте это:

$(".addme").bind("change",function(){
    var _sum = 0;

    $(".addme").each(function(i){
        _sum += parseInt($(this).val());
    });

    $("#result").val(_sum);
});