CODEWITHSUNDEEP
javascriptjquery
Mattias Molin
Mattias Molin

Reputation: 63

How to calculate an amount with commas

I have a product that cost 1,500.85 and i want to multiply it with the quantity input using javascript. But because the amount is over a thousand there is a comma and because of that comma the result shown "NaN" .. How do i calculate the amount with the comma?

NOTE: It works if the amount is under a thousand.

// Calculation script START
$(document).ready(function() {
  CalculateTotalPrice();
});

document.getElementsByClassName("input-text qty text")[0].onkeyup = function() {CalculateTotalPrice()};
$(select).onchange(function() {
  CalculateTotalPrice();
});


function CalculateTotalPrice() {
setTimeout(function(){
  
var price = document.querySelector(".price .woocommerce-Price-amount.amount").innerText;
var quantity = document.getElementsByClassName("input-text qty text")[0].value;

var total = price * quantity;
var totalOnly2Decimal = total.toFixed(2);

document.getElementById("result").innerHTML = "DKK " + totalOnly2Decimal + " inkl. moms"; 
}, 100);
}
// Calculation script END
<!-- Price -->
<div class="elementor-widget-container">
<p class="price">Fra: 
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol"></span>1,122.50
</span> kr. inkl. moms</p>
</div>

<!-- Quantity field -->
<div class="quantity"> 
<label class="screen-reader-text" for="quantity_5cd3fab7bb0d7"></label> 
<input type="number" id="quantity_5cd3fab7bb0d7" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Stk." size="4" inputmode="">

<!-- Result -->
<h3 style="font-size: 17px; font-weight:bold; display:inline; text-transform:uppercase;">Total:</h3>
<p class="result" id="result" style="display:inline;"></p>

Upvotes: 0

Views: 1286

Answers (4)

dbramwell
dbramwell

Reputation: 1326

There seemed to be a couple of errors with your snippet that i've done my best to fixup below. To answer your question, there are two main points:

  1. var priceAsFloat = parseFloat(price.replace(/,/g, ''));

Remove the comma from the price and then convert it to a float before doing any maths with it

  1. var result = totalOnly2Decimal.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')

Convert the result back to a string and use the above regex to put commas back in at the desired points.

Working example:

// Calculation script START
$(document).ready(function() {
  CalculateTotalPrice();
});

document.getElementsByClassName("input-text qty text")[0].onkeyup = function() {CalculateTotalPrice()};
$("input").change(function() {
  CalculateTotalPrice();
});


function CalculateTotalPrice() {
setTimeout(function(){
  
var price = document.querySelector(".price .woocommerce-Price-amount.amount").innerText;
var priceWithoutCommas = price.replace(/,/g, '');
var quantity = document.getElementsByClassName("input-text qty text")[0].value;

var total = priceWithoutCommas * quantity;
var totalOnly2Decimal = total.toFixed(2);

var result = totalOnly2Decimal.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')

document.getElementById("result").innerHTML = "DKK " + result + " inkl. moms"; 
}, 100);
}
// Calculation script END
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Price -->
<div class="elementor-widget-container">
<p class="price">Fra: 
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol"></span>1,122.50
</span> kr. inkl. moms</p>
</div>

<!-- Quantity field -->
<div class="quantity"> 
<label class="screen-reader-text" for="quantity_5cd3fab7bb0d7"></label> 
<input type="number" id="quantity_5cd3fab7bb0d7" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Stk." size="4" inputmode="">

<!-- Result -->
<h3 style="font-size: 17px; font-weight:bold; display:inline; text-transform:uppercase;">Total:</h3>
<p class="result" id="result" style="display:inline;"></p>

Upvotes: 0

JaymesKat
JaymesKat

Reputation: 11

You can remove the comma with the replace method on the String object and convert to integer

price = parseInt(price.replace(/,/g,''))
var total = price * quantity;

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

Change this line to the following

var price = 
document.querySelector(".price .woocommerce-Price-amount.amount").innerText.split(",").join("");


// Calculation script START
$(document).ready(function() {
  CalculateTotalPrice();
});

document.getElementsByClassName("input-text qty text")[0].onkeyup = function() {
  CalculateTotalPrice()
};



function CalculateTotalPrice() {
  setTimeout(function() {

    var price = document.querySelector(".price .woocommerce-Price-amount.amount").innerText.split(",").join("");
    var quantity = document.getElementsByClassName("input-text qty text")[0].value;

    var total = price * quantity;
    var totalOnly2Decimal = total.toFixed(2);

    document.getElementById("result").innerHTML = "DKK " + totalOnly2Decimal + " inkl. moms";
  }, 100);
}
// Calculation script END
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Price -->
<div class="elementor-widget-container">
  <p class="price">Fra:
    <span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol"></span>1,122.50
    </span> kr. inkl. moms</p>
</div>

<!-- Quantity field -->
<div class="quantity">
  <label class="screen-reader-text" for="quantity_5cd3fab7bb0d7"></label>
  <input type="number" id="quantity_5cd3fab7bb0d7" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Stk." size="4" inputmode="">

  <!-- Result -->
  <h3 style="font-size: 17px; font-weight:bold; display:inline; text-transform:uppercase;">Total:</h3>
  <p class="result" id="result" style="display:inline;"></p>
  <script>
  </script>

Upvotes: 0

arizafar
arizafar

Reputation: 3122

Replace all the commas using String.prototype.replace then multiply. 

let price = '1,500.85';
let quantity = '7';

let total = price.trim().replace(/,/g, '') * quantity;
console.log(total)

Upvotes: 1

Related Questions