2017-11-09 55 views
0

私は2つの小計内のアイテムを計算し、それらの小計の合計を1つの合計数にする必要があるこのフォームを持っています。jQueryを使用して小計と合計を計算するにはどうすればよいですか?

私はsubTotal1とsubTotal2の合計を得ることができますが、私は平均数(数式ではなくJavaScriptコード)を計算する手がかりがないので、合計計算に失敗しました。

は、ここに私のコードです:

\t $(document).on("change", ".qty1", function() { 
 
\t  var sum = 0; 
 
\t  $(".qty1").each(function(){ 
 
\t   sum += +$(this).val(); 
 
\t  }); 
 
\t  $(".subTotal1").val(sum); 
 
\t }); 
 
\t $(document).on("change", ".qty2", function() { 
 
\t  var sum = 0; 
 
\t  $(".qty2").each(function(){ 
 
\t   sum += +$(this).val(); 
 
\t  }); 
 
\t  $(".subTotal2").val(sum); 
 
\t }); 
 
\t // Doesn't work 
 
\t $(document).on("change", ".subTotal", function() { 
 
\t  var sum = 0; 
 
\t  $(".subTotal").each(function(){ 
 
\t   sum += +$(this).val(); 
 
\t  }); 
 
\t  $(".total").val(sum/2); 
 
\t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action="./"> 
 
    \t \t Shoes 1: <input type="number" name="shoes1" class="qty1"><br> 
 
\t  Shoes 2: <input type="number" name="shoes2" class="qty1"><br> 
 
\t  Shoes 3: <input type="number" name="shoes3" class="qty1"><br> 
 
\t  Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br> 
 
\t  <br> 
 
\t  Sandals 1: <input type="number" name="sandals1" class="qty2"><br> 
 
\t  Sandals 2: <input type="number" name="sandals2" class="qty2"><br> 
 
\t  Sandals 3: <input type="number" name="sandals3" class="qty2"><br> 
 
\t  Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br> 
 
\t  <br> 
 
\t  Total: <input type="number" name="total" class="total"><br> 
 
\t  <br> 
 
\t  Mean (50% Shoes + 50% Sandals)/2: <input type="number" name="mean" class="mean"> 
 
\t  <br> 
 
\t \t <input type="submit" value="Submit"> 
 
    \t </form>

+0

**が、合計小計を計算する関数を呼び出しますか – guradio

+0

*「平均数を計算する手がかりがありません」* - あなたが数学を理解していないか、JSで実装する方法がわからないということですか?あなたの質問を編集して、入力例とそれに対応する希望の結果を入力してください。 – nnnnnn

答えて

1

文書ではJavaScriptのみユーザーによって行われた変更を検出していないか、または他のあなたには、いくつかの無限ループを通過します。作業が完了したときに、これだけ計算はどのようにこれを言うことができます**失敗したのか?

\t $(document).on("change", ".qty1", function() { 
 
\t  var sum = 0; 
 
\t  $(".qty1").each(function(){ 
 
\t   sum += +$(this).val(); 
 
\t  }); 
 
\t  $(".subTotal1").val(sum); 
 
      calcTotal(); 
 
\t }); 
 
\t $(document).on("change", ".qty2", function() { 
 
\t  var sum = 0; 
 
\t  $(".qty2").each(function(){ 
 
\t   sum += +$(this).val(); 
 
\t  }); 
 
\t  $(".subTotal2").val(sum); 
 
      calcTotal(); 
 
\t }); 
 
\t // Does work 
 
\t function calcTotal() { 
 
\t  var sum = 0; 
 
\t  $(".subTotal").each(function(){ 
 
\t   sum += +$(this).val(); 
 
\t  }); 
 
\t  $(".total").val(sum); 
 
      $(".mean").val(sum/2); 
 
\t };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action="./"> 
 
    \t \t Shoes 1: <input type="number" name="shoes1" class="qty1"><br> 
 
\t  Shoes 2: <input type="number" name="shoes2" class="qty1"><br> 
 
\t  Shoes 3: <input type="number" name="shoes3" class="qty1"><br> 
 
\t  Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br> 
 
\t  <br> 
 
\t  Sandals 1: <input type="number" name="sandals1" class="qty2"><br> 
 
\t  Sandals 2: <input type="number" name="sandals2" class="qty2"><br> 
 
\t  Sandals 3: <input type="number" name="sandals3" class="qty2"><br> 
 
\t  Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br> 
 
\t  <br> 
 
\t  Total: <input type="number" name="total" class="total"><br> 
 
\t  <br> 
 
\t  Mean (50% Shoes + 50% Sandals)/2: <input type="number" name="mean" class="mean"> 
 
\t  <br> 
 
\t \t <input type="submit" value="Submit"> 
 
    \t </form>

関連する問題