Automatische Berechnung gibt Undefiniert zurück

Question

Ich habe Eingabefelder Qnt, Einheitspreis und Gesamtpreis. Außerdem habe ich einen jQuery-Code für die automatische Berechnung geschrieben.

Html -

<input class="form-control qnt" min="0" step="any" type="number" name="qnt" placeholder="Quantity" required> 
<input class="form-control unit_price" type="number" min="0" step="any" name="unit_price" placeholder="Unit Price" required> 
<input class="form-control total_price" type="number" name="total_price" placeholder="Total Price" value="" readonly> 

JQuery -

$('table.table').change('input', function() { 
    var Qnt = $('.qnt').val(); 
    var UnitPrice = $('.unit_price').val(); 
    var totalPrice = parseInt(Qnt) * parseInt(UnitPrice); 
    $('.total_price').val(totalPrice); // Result Print 
}); 

Dieser Code berechnet in Ordnung, aber das Problem ist, wenn ich versuche, Gesamtpreis Wert zu fangen ($('.total_price').val();) kehrt undefiniert . Nach I Konsole die totalPrice ersten Mal gibt es null null dann Ergebnis.

Kann mir jemand sagen, was ich falsch gemacht habe? Danke im Voraus.

Hinweis: Meine Tabellenfelder werden automatisch mit Ajax erstellt. Entschuldigung, ich habe das vorher nicht angedeutet.

Answer 1

ändern Funktionswähler falsch war .Seine ein .from-control und leer Gesamtpreis vor mit in

$('.form-control').change('input', function() { 
 
    var Qnt = $('.qnt').val(); 
 
    var UnitPrice = $('.unit_price').val(); 
 
    var totalPrice = parseInt(Qnt) * parseInt(UnitPrice); 
 
    $('.total_price').empty().val(totalPrice); // Result Print 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="form-control qnt" min="0" step="any" type="number" name="qnt" placeholder="Quantity" required> 
 
<input class="form-control unit_price" type="number" min="0" step="any" name="unit_price" placeholder="Unit Price" required> 
 
<input class="form-control total_price" type="number" name="total_price" placeholder="Total Price" value="" readonly>

Answer 2

Sie sollten Ihr Ziel einzugeben hinzufügen ändern, anstatt eine Klasse, wie unten, und Wenn das change-Ereignis bei der ersten Eingabe ausgelöst wird, gibt das eine NaN-Ausgabe, da andere Eingabe zu diesem Zeitpunkt leer wäre. Eine einfache Überprüfung von NaN (keine Zahl) sollte ausreichen, und Sie sollten sich nicht auf eine Bootstrap-Klasse verlassen. Für den Fall, dass Sie in Zukunft auf einen anderen Frame wechseln, müssten Sie das ändern der Klassenname, und das Skript wird aufhören zu arbeiten, so, entweder Input-Tag direkt zielen, oder eine eigene Klasse hinzufügen für das Targeting

$('.form-control').change('input', function() { 
    var Qnt = $('.qnt').val(), 
    UnitPrice = $('.unit_price').val(), 
    totalPrice = parseInt(Qnt) * parseInt(UnitPrice); 
    (!isNaN(totalPrice)) ? $('.total_price').empty().val(totalPrice): ''; 
}); 

hier ist ein fiddle davon

Answer 3

Sie können diesen einfachen Trick . Validieren Sie die Eingaben, wenn sie einen Wert haben, andernfalls wird sie als Null (0) betrachtet. In diesem Beispiel fügen wir eine IF-Anweisung hinzu, um die zweite Eingabe zu validieren.

$('.form-control').on('change', function(){ 
     var qnt = $('.qnt').val(); 
     var unit_price = $('.unit_price').val();  
     if(unit_price > 0){ 
      unit_price = unit_price; 
      }else { 
       unit_price = 0; 
      } 
     var total = parseInt(qnt) * parseInt(unit_price); 
     $('.total_price').empty().val(total); 

    }); 

Answer 4

Vielen Dank für Ihre Hilfe. Ich habe mein Problem gelöst. Ich erstelle nur benutzerdefinierte IDs für einzelne Tabellenzeilen und es funktioniert perfekt.

$('#cus1').change('input', function() { 
 
    \t var Qnt = $('.qnt').val(); 
 
    \t var UnitPrice = $('.unit_price').val(); 
 
    \t var totalPrice = parseInt(Qnt) * parseInt(UnitPrice); 
 
    \t $('.total_price').val(totalPrice); // Result Print 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cus1"> 
 
<input class="form-control qnt" min="0" step="any" type="number" name="qnt" placeholder="Quantity" required> 
 
<input class="form-control unit_price" type="number" min="0" step="any" name="unit_price" placeholder="Unit Price" required> 
 
<input class="form-control total_price" type="number" name="total_price" placeholder="Total Price" value="" readonly> 
 
</div>