Как рассчитать общую стоимость для ввода, используя jquery

Question

У меня есть набор входных данных, у меня есть количественные и ценовые данные, и я хочу вычислить итоговое значение, используя jQuery для каждой строки?

$('#step2').on("click", function() {
  var total = 0;
  $('.na qu').each(function() {
    var prix = Number($('.na').val());
    var quantite = Number($('.qu').val());
    var total = prix * quantite
    console.log(total)
  });
  alert(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">

  <input type="text" name="form-0-Prix_Unitaire" class="na" id="id_form-0-Prix_Unitaire">
  <input type="text" name="form-0-Quantite" class="qu" id="id_form-0-Quantite">

  <input type="text" name="form-0-Prix_Unitaire" class="na" id="id_form-0-Prix_Unitaire">
  <input type="text" name="form-0-Quantite" class="qu" id="id_form-0-Quantite">

  <input type="text" name="form-0-Prix_Unitaire" class="na" id="id_form-0-Prix_Unitaire">
  <input type="text" name="form-0-Quantite" class="qu" id="id_form-0-Quantite">

  <button id="step2" class="btn btn-primary">Ajouter1</button>
</form>

Answer 1

Это даст желаемый результат.

$('#step2').on("click", function(e) {
  e.preventDefault();

  var total = 0;

  $('.qu').each(function(index) {
    var quantiteVal = $(this).val();

    // get the prix element with the same index as this quantite element
    var $prixEl = $('.na').eq(index);
    var prixVal = $prixEl.val();

    // ensure values aren't empty, undefined, or not a number
    var quantite = quantiteVal && !isNaN(quantite) ? parseInt(quantiteVal) : 0;
    var prix = prixVal && !isNaN(prix) ? parseInt(prixVal) : 0;

    total += quantite * prix;
  });

  alert(total);
});

Answer 2

Еще одну вещь, которую вы хотите исправить:

У вас есть три пары входов формы, но их имена и идентификаторы дублируются.

Вот пример того, как это будет выглядеть с уникальными именами и идентификаторами:

  <input type="text" name="form-0-Prix_Unitaire-0" class="na" id="id_form-0-Prix_Unitaire-0">
  <input type="text" name="form-0-Quantite-0" class="qu" id="id_form-0-Quantite-0">

  <input type="text" name="form-0-Prix_Unitaire-1" class="na" id="id_form-0-Prix_Unitaire-1">
  <input type="text" name="form-0-Quantite-1" class="qu" id="id_form-0-Quantite-1">

  <input type="text" name="form-0-Prix_Unitaire-2" class="na" id="id_form-0-Prix_Unitaire-2">
  <input type="text" name="form-0-Quantite-2" class="qu" id="id_form-0-Quantite-2">

Это напрямую не влияет на вычисление количества * цены, но вызовет проблемы при отправке формы, если не будет исправлено.