Werte erhalten, um einen Text anstelle der Spanne zu füllen

Question

Ich habe ein Skript zusammengefügt, das die Werte in Textfeldern hinzufügt und die Summen in einem Bereich anzeigt. Ich habe eine Menge Dinge ausprobiert, aber ich bekomme es nicht, um die Summen in einem Eingabefeld anzuzeigen. Hier ist eine Geige, in der ich gearbeitet habe. http://jsfiddle.net/elevationprint/MaK2k/17/

Grundsätzlich möchte ich die Spannen zu Eingabe Textfelder ändern. Wenn jemand einen Blick darauf werfen kann, was ich vermisse, würde ich es schätzen! Der Code ist dieses

HTML

Red<br> 
12x12<input class="qty12" value="" /><br/> 
12x24<input class="qty24" value="" /><br> 
<br> 
Blue<br> 
12x12<input class="qty12" value="" /><br/> 
12x24<input class="qty24" value="" /><br> 
<br><br> 
Total = <span class="qty12lable"></span> x $.95<br> 
Total = <span class="qty24lable"></span> x $1.40<br> 

SCRIPT

$('.qty12').keyup(function(){ 
    var qty12Sum=0; 
    $('.qty12').each(function(){ 
     if (this.value != "") 
      qty12Sum+=parseInt(this.value); 

}); 
    // alert('foo'); 
    $(".qty12lable").text(qty12Sum); 
    //console.log(amountSum);  }); 


$('.qty24').keyup(function(){ 
    var qty24Sum=0; 
    $('.qty24').each(function(){ 
     if (this.value != "") 
      qty24Sum+=parseInt(this.value); 

}); 
    // alert('foo'); 
    $(".qty24lable").text(qty24Sum); 
    //console.log(amountSum); }); 

Answer 1

Sie können wie so die Eingabefelder Ziel:

Total = <input class="qty12lable" value=""> x $.95<br> 
Total = <input class="qty24lable" value=""> x $1.40<br> 

$("input.qty12lable").val(qty12Sum); 
$("input.qty24lable").val(qty24Sum); 

Answer 2

Um den Text (Wert) eines Satzes Textfeld Sie müssen .val() nicht .text() verwenden. Wie folgt aus:

$('.qty12').keyup(function() { 
 
    var qty12Sum = 0; 
 
    $('.qty12').each(function() { 
 
    if (this.value != "") 
 
     qty12Sum += parseInt(this.value); 
 

 
    }); 
 
    
 
    
 
    $(".qty12lable").val(qty12Sum); 
 
}); 
 

 

 
$('.qty24').keyup(function() { 
 
    var qty24Sum = 0; 
 
    $('.qty24').each(function() { 
 
    if (this.value != "") 
 
     qty24Sum += parseInt(this.value); 
 

 
    }); 
 
    
 
    
 
    $(".qty24lable").val(qty24Sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Red 
 
<br>12x12 
 
<input class="qty12" value="" /> 
 
<br/>12x24 
 
<input class="qty24" value="" /> 
 
<br> 
 
<br>Blue 
 
<br>12x12 
 
<input class="qty12" value="" /> 
 
<br/>12x24 
 
<input class="qty24" value="" /> 
 
<br> 
 
<br> 
 
<br>Total = <input class="qty12lable"/> x $.95 
 
<br>Total = <input class="qty24lable"/> x $1.40 
 
<br>

Answer 3

Dieser Ausschnitt hat eine gewisse Logik, wie Sie Ereignis-Listener auf Eingabefelder anhängen können und wie Sie ihre Werte erhalten können. Es ist nicht perfekt und hat einige Fehler aus der Produktionsebene, aber dies wird einen Hinweis darauf geben, wie man DOM mit Jquery anhören und manipulieren kann. Worum geht es bei Jquery?

$("input") 
 
    .change(function() { 
 
    var prevVal = ($('#total').html() !== '') ? $('#total').html() : 0; 
 
    if(parseInt($(this).val()) === NaN) { 
 
    return; 
 
    } 
 
    $('#total').html(parseInt($(this).val()) + parseInt(prevVal)); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="1"></input><br> 
 
<input type="text" id="2"></input><br> 
 
<hr> 
 
Total = <span id="total" class="qty12lable"></span> <br>