自動計算結果が返却されない

Question

Qnt、単価および合計価格の入力項目があります。また、私は自動計算のためのjQueryコードを書いています。

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 
}); 

このコードは、罰金計算が、私はそれを返す合計価格値（$('.total_price').val();）をキャッチしようとした場合の問題は、ある未定義 。後にコンソールtotalPrice初めて返すnull null結果。

誰も私が間違って何をしたか教えてもらえますか？前もって感謝します。

注：私のテーブルフィールドは、Ajaxを使用して自動的に作成されます。申し訳ありません私はそれ以前に黙っていませんでした。

Answer 1

変更機能選択は間違っていた前.from-controlと空の合計価格は

$('.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

にあなたは以下のように、入力ではなく、クラスにターゲットを変更する必要があると追加.its、および最初の入力時にchangeイベントが発生した場合、その時点で他の入力が空になるのでNaN出力が得られるので、NaN（数値ではない）の単純なチェックで十分であり、ブートストラップクラスに依存しないでください。将来他のフレームに移動する場合は、変更する必要がありますクラス名、およびスクリプトは動作を停止し、そう、直接入力タグをターゲットに、またはここ

$('.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): ''; 
}); 

を標的とするために、独自のカスタムクラスを追加します

Answer 3

あなたはこの単純なトリックを行うことができ、それのfiddleです。値がある場合は入力を検証し、そうでない場合はゼロ（0）と見なされます。この例では、IF文を追加して2番目の入力を検証します。

$('.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

ありがとうございました。私は私の問題を解決しました。私はちょうど個々のテーブル行のための自動カスタムIDを作成し、それは完全に動作します。

$('#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>