After click the select option update product price shows wrong in opencart

When I click on selected option product price update shows wrong. Here is my code

<div class="container">
      <div class="row">
      <div class="col-md-6">Initial Price: <span id="thisIsOriginal" class="">$45,000.00</span></div>
      <div class="col-md-6">Total: <span id="total">$45,000.00</span></div>
      </div>
      <div class="row">
        <select class="optionPrice" name="select-1">
          <option value="">Please Select</option>
          <option data-price="2,000.00" value="20">+$2,000.00</option>
        </select>
      </div>
    </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.optionPrice').change(function () {
        var OriginalPrice = $('#thisIsOriginal').text();
        var OriginalCurrency = OriginalPrice.substring(0, 1);
        OriginalPrice = OriginalPrice.substring(1);
        var total = 0;
        $('.optionPrice').each(function () {
            if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
                console.log($('option:selected', this).attr("data-price"));
                total += parseFloat($('option:selected', this).attr('data-price'));
            }
        });
        var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
        $('#total').text('$' + newTotal.toFixed(2));
    });
});
</script>
 

How to solve this issue.I want after select the price shows 47,000.

Answer

The problem with your code is,

• Your price contains , inside it. So after parseFloat() the values after the comma is getting truncated. You need to remove the commas before using parseFloat.

Changes need on the following lines,

 total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));

and

var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);

Updated Fiddle

  $('.optionPrice').change(function() {
    var OriginalPrice = $('#thisIsOriginal').text();
    var OriginalCurrency = OriginalPrice.substring(0, 1);
    OriginalPrice = OriginalPrice.substring(1);

    var total = 0;
    $('.optionPrice').each(function() {
      if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
        console.log($('option:selected', this).attr("data-price"));
        total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));

      }
    });
    var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
    $('#total').text('$' + newTotal.toFixed(2));
  });

Edit for Getting comma separated value,

$('.optionPrice').change(function() {
  var OriginalPrice = $('#thisIsOriginal').text();
  var OriginalCurrency = OriginalPrice.substring(0, 1);
  OriginalPrice = OriginalPrice.substring(1);
  var total = 0;
  $('.optionPrice').each(function() {
    if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
      console.log($('option:selected', this).attr("data-price"));
      total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));
    }
  });
  var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
  newTotal = numberWithCommas(newTotal);
  $('#total').text('$' + newTotal + ".00");
});

function numberWithCommas(x) {
  return x.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
}