Summe aller Eingabewerte mit jQuery ermitteln

Question

Ich benötige die Summe aller Werte aus meiner Eingabe. Das Ergebnis muss im Eingabefeld Summe angezeigt werden, das ist readonly .

Der Benutzer kann 1 oder mehrere Werte eingeben. Das Problem ist, dass mein var Wert ist nicht korrekt. Ich würde auch gerne wissen, wie ich den Wert sofort zurückgeben kann, indem ich onchange ?

$(document).ready(function() {
  $("div#example input").change(function() {
    var value = '';    
    $("div#example input[name!=total]").each(function() {
      value += $(this).val();      
    });
    console.log("value after each: " + value);
  });
})

HTML:

<div id="example">
   <input type="text" size="5" id="value1" name="value1" />
   <input type="text" size="5" id="value2" name="value2" />
   <input type="text" size="5" id="value3" name="value3" />
   <input type="text" size="5" id="value4" name="value4" />
   <input type="text" size="5" id="value5" name="value5" />
   <input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

Answer 1

Versuchen Sie so etwas:

$(document).ready(function() {
    $("div#example id^='value'").change(function() {
        var value = 0;

        $("div#example input[name!=total]").each(function() {
            var i = parseInt($(this).val());

            if (!isNaN(i))
            {
                value += i;
            }
        });

        $('#total').val(value);
    });
})

Answer 2

Use += parseInt($(this).val());

Answer 3

var sum = 0;  
$('input[id^=value]').each (function(){ sum+=$(this).val(); });
$('#total').val( sum );

:]

Answer 4

Ich denke, das könnte näher dran sein:

<script type="text/javascript">

$(document).ready(function() {

  $("#example value").change(function() {
    var total = 0;    
    $("#example value").each(function() {
      total += parseInt($(this).val());      
    });
    window.console && console.log("value after each: " + total);
  });
})

</script> 

<div id="example">
   <input type="text" size="5" class="value" name="value1" />
   <input type="text" size="5" class="value" name="value2" />
   <input type="text" size="5" class="value" name="value3" />
   <input type="text" size="5" class="value" name="value4" />
   <input type="text" size="5" class="value" name="value5" />
   <input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
</div>

Ihr ursprünglicher Selektor für $.change() schloss das Gesamtfeld ein, was Sie vermutlich nicht wollen.

Liege ich richtig in der Annahme, dass Sie Zahlen addieren wollen? Ihre ursprüngliche Variable "Wert" war eine Zeichenkette.

Übrigens ist es sicherer, das Idiom "window.console && console.log" zu verwenden, da es für viele Benutzer keine Konsolenvariable geben wird. (Obwohl ich wette, dass diese Zeile nur zum Debuggen da war.)

EDITAR

Basierend auf anderen Vorschlägen wurde parseInt() hinzugefügt.

Answer 5

Verwenden Sie die jQuery-Formularserialisierung:

alert($("form_id").serialize());

Es gibt auch einen Vergleich für verschiedene Serialisierungsarten: http://jquery.malsup.com/form/comp/