Как сделать форму заказа с расчетом jquery

Question

Я хочу, чтобы в каждой строке была одна цена по умолчанию, и все входы в этой строке должны суммировать * цену по умолчанию. Этот код работает, но я знаю, что у меня есть общая строка foreach, я хочу получить вместе все строки. Итак, у меня есть в этом примере две строки. Каждая строка имеет 4 входа, каждый вход должен суммировать и это общее от входных данных * цена по умолчанию для каждой строки

// main function when page is opened
(function($) {
  $(function() {
    var tbl = $('#tbl_a');
    tbl.find('tr').each(function() {
      $(this).find('input[type=text]').bind("keyup", function() {
        calculateSum();
      });
    });

    function calculateSum() {
      var tbl = $('#tbl_a');
      tbl.find('tr').each(function() {
        var sum = 0;
        $(this).find('input[type=text]').not('.total').each(function() {
          if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
          }
        });

        $(this).find('.total').val(sum.toFixed(2));
      });
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table name="tbl_a" id="tbl_a">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Wit</td>
      <td>Bruin</td>
      <td>Kaiser</td>
      <td>Pistolet wit</td>
      <td>Pistolet bruin</td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag puur</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][3][q][Wit]" id="dataOrder3qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Bruin]" id="dataOrder3qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Kaizer]" id="dataOrder3qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistWit]" id="dataOrder3qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistBruin]" id="dataOrder3qPistBruin" value=""></td>
      <td>
        <input type="text" class="form-control total" name="at[total_1]" id="total_1" value="" placeholder="total" style="width:160px;" />
      </td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag melk</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
      <td>

      </td>
    </tr>
</table>

<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total" style="width:160px;" />

Answer 1

Я думаю, что вы хотите добавить каждое входное значение в каждой строке. а затем суммировать все значения class = "total". Если я прав, то следующий код может работать. Но старайтесь не использовать дубликат идентификатора. Я надеюсь, что это может работать. HTML:

<table name="tbl_a" id="tbl_a">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Wit</td>
      <td>Bruin</td>
      <td>Kaiser</td>
      <td>Pistolet wit</td>
      <td>Pistolet bruin</td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag puur</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][3][q][Wit]" id="dataOrder3qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Bruin]" id="dataOrder3qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Kaizer]" id="dataOrder3qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistWit]" id="dataOrder3qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistBruin]" id="dataOrder3qPistBruin" value=""></td>
      <td>
        <input type="text" class="form-control total" name="at[total_1]" id="total_1" value="" placeholder="total" />
      </td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag melk</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
      <td>
<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total"  />
      </td>
    </tr>

    <tr class="item">
      <td width="200">Hagelslag melk</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
      <td>
<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total"  />
      </td>
    </tr>
</table>

<input type="text" id="finalTotal"  name="at[total_2]" placeholder="total"  /> 

Jquery:

// main function when page is opened
(function($) {
  $(function() {
    var tbl = $('#tbl_a');
    tbl.find('tr').each(function() {
      $(this).find('input[type=text]').bind("keyup", function() {
        calculateSum();

      });
    });

    function calculateSum() {
      var tbl = $('#tbl_a');
      tbl.find('tr').each(function() {
        var sum = 0;
        var total_sum = 0; // for final sum
        $(this).find('input[type=text]').not('.total').each(function() {
          if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
          }
        });

        $(this).find('.total').val(sum.toFixed(2));

        // for final sum
          $('.total').each(function(){
            total_sum += parseFloat(this.value);
            $("#finalTotal").val(total_sum);
        });
      });
    }

  });
})(jQuery);