Why does Wordpress-Jquery checkbox calculator return NaN?

user4449524
May 14, 2023
166 views
0 votes
2 Answers

i heve calucalot problem with jquery.
Custom Wpform Checkbox Field returning NaN.

HTML

<div class="wpforms-payment-total">
    $ 85 
    </div>
    
    <input type="checkbox" name="myBox2"  size="12" />
    With Two Coat + 15%
    <b><span id="totalfinal"></span> </b>

jQuery(document).ready(function() {
var Valuee = $('.wpforms-payment-total');
  jQuery('input[name="myBox2"]').on('click', function() {
    if (jQuery(this).is(':checked')) {
    var finalprice = parseInt($('.wpforms-payment-total').text()) * 1.15;
      jQuery('#totalfinal').text(finalprice.toFixed(2));
    } else {
      var finalprice = parseInt($('.wpforms-payment-total').text());
      jQuery('#totalfinal').text(finalprice.toFixed(2));
    }
  });
});

Answers

You can not parse any String to a number, you can either split your total amount in a prefix and a number oder you have to remove anything but the number from the string.

As I think storing the number in its own Tag makes more sense, here is a working snipet that does that.

jQuery(document).ready(function() {
const Valuee = $('.wpforms-payment-total');
  jQuery('input[name="myBox2"]').on('click', function() {
    let finalprice = parseInt(Valuee.text().replace(/^[^0-9,.]+/, "").match( /^[0-9,.]+/g, '')[0]);
    if (jQuery(this).is(':checked')) {
      finalprice *= 1.15;
    }
    jQuery('#totalfinal').text(finalprice.toFixed(2));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpforms-payment-total">
  $ 85
</div>
    
<input type="checkbox" name="myBox2"  id="myBox2" size="12" />
<label for="myBox2">With Two Coat + 15%</label>
<br>
<b><span id="totalfinal"></span></b>

Here is another methode, using data attributes to make it more versityle, maybe that is something you might want to learn about when dealing with jQuery:

jQuery(document).ready(function() {
  function updateTotalFinal(){
    const subtotalValue = +jQuery('.wpforms-payment-total').text().replace(/^[^0-9,.]+/, "").match( /^[0-9,.]+/g, '')[0];
    let totalValue = subtotalValue;
    const totalFinalElem = jQuery("#totalfinal");
    
    jQuery("input.change-total:checked").each(function() {
      const $this = jQuery(this);
      if ($this.is("[data-method=add]")) {
        totalValue += +$this.data("amount");
      } else if ($this.is("[data-method=multiply]")) {
        totalValue += subtotalValue * $this.data("amount");
      }
    });
    
    totalFinalElem.text(`$ ${totalValue}`);
  }
  
  jQuery("input.change-total").on("change", function() {
    updateTotalFinal();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpforms-payment-total">
  85€
</div>
 
<label>
  <input type="checkbox" class="change-total" name="myBox2" size="12" data-amount="0.15" data-method="multiply" />
  With Two Coat + 15%
</label>
<br>
<label>
  <input type="checkbox" class="change-total" name="myBox3" size="12" data-amount="5" data-method="add" />
  With extra Pants + $ 5
</label>
<br>
<b><span id="totalfinal">$ 85</span></b>

You must first remove all non-digits character from price then use that,

Notice that for checkbox it is better to use change event

jQuery('input[name="myBox2"]').on('change', function() {
    
    // Remove any non-digits character 
    var price = parseInt($('.wpforms-payment-total').text().replace( /^D+/g, ''));

    if (jQuery(this).is(':checked')) {

        var finalprice = price * 1.15;

        jQuery('#totalfinal').text(finalprice.toFixed(2));

    } else {

        jQuery('#totalfinal').text(price.toFixed(2));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpforms-payment-total">
    $ 85 
</div>
    
<input type="checkbox" name="myBox2"  size="12" />
With Two Coat + 15%
<b><span id="totalfinal"></span> </b>

Please signup or login to give your own answer.

Click here to cancel reply.

Why does WordPress-Jquery checkbox calculator return NaN?

Answers