How to calculate total price for input using jquery

Question

I have a formset of inputs, I have quantity and price inputs and I want to calculate the total using jQuery for every row?

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

I pasted your code into a snippet and the following error pops up, "Uncaught SyntaxError: Unexpected token '+='". Also, you don't do anything from stopping your form from being submitted and reloading the page. Oh and IDs must be unique — j08691
– j08691, Commented May 1, 2020 at 20:11
Another thing to note is that your jquery selector is $('.na qu') which will never work as without a preceding . you are asking jQuery to look for a tag name so <qu>. You'll need to change this to $('.na , .qu') — Glynn Hurrell
– Glynn Hurrell, Commented May 1, 2020 at 20:14

simmer · Accepted Answer · 2020-05-07 17:11:56Z

1

This will provide the result you want.

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

edited May 7, 2020 at 17:11

simmer

2,7181 gold badge19 silver badges25 bronze badges

answered May 1, 2020 at 20:24

user13046635

Sign up to request clarification or add additional context in comments.

3 Comments

itjuba Over a year ago

the result is Nan ??

user13046635 Over a year ago

Did you input the numbers?

user13046635 Over a year ago

Code has been updated. so, checking alphabet or empty string.

simmer · Accepted Answer · 2020-05-01 20:23:21Z

One more thing you'll want to fix:

You have three pairs of form inputs, but their names and ids are duplicated.

Here's an example of what it would look like with unique names and ids:

  <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">

This doesn't directly affect your price*quantity calculation, but will cause you problems when submitting your form if not corrected.

Collectives™ on Stack Overflow

How to calculate total price for input using jquery

2 Answers 2

3 Comments

You have three pairs of form inputs, but their names and ids are duplicated.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

You have three pairs of form inputs, but their names and ids are duplicated.

Comments

Your Answer

Sign up or log in

Post as a guest

Related