Shopping cart calculations error

JavaScript
1

Getting an error in fetching checkbox values and also howmany counter reset to 1

// =================================================================================================================================
  // TOTAL CALCULATION
  $(document).ready(function(){
    // Bind change event to radio buttons and checkboxes
    $('input[type="checkbox"], input[name="service"]').onchange(function(){
      
      calculate();
      
    });
  });

  function calculate() {

    // Get the value of selected radio button
    var servicesprice = $('input[name="service"]:checked').val() || 0;
    var howMany = $('.numberofwash').val() || 0;
    var radioValue = servicesprice * howMany;
    $('.howmanyqty').html(howMany);

    // Get the values of selected checkboxes
    var checkboxValues = $('input[type="checkbox"]:checked').map(function(){
      return parseFloat($(this).val());
    }).get(); 

   // Calculate the subtotal
    var subtotal = radioValue + checkboxValues.reduce(function(acc, val) {
        return acc + val;
    }, 0);

    // Add tax based on subtotal value
    var tax = 0;
    if (subtotal <= 200) {
        tax = 50;
    } else {
        tax = 25;
    }

    var total = subtotal + tax;
    // Display the tax
    $('.id-tax-price').text(tax.toFixed(2));

    // Display the total
    $('.id-total-price').text(total.toFixed(2));

    // Set the total price to the hidden input value
    $('#totalprice').val(total.toFixed(2));
  }


function expressCalculate() {
    // Get the value of selected radio button
    var servicesprice = parseFloat($('input[name="service"]:checked').val()) || 0;
    var howMany = parseFloat($('.numberofwash').val()) || 0;
    var radioValue = servicesprice * howMany;
    $('.howmanyqty').html(howMany);

    // Get the values of selected checkboxes
    var checkboxValues = $('input[type="checkbox"]:checked').map(function(){
        return parseFloat($(this).val()) || 0;
    }).get(); 

    // Calculate the subtotal
    var subtotal = radioValue + checkboxValues.reduce(function(acc, val) {
        return acc + val;
    }, 0);

    // Add tax based on subtotal value
    var tax = 0;
    if (subtotal <= 200) {
        tax = 50;
    } else {
        tax = 25;
    }

    var total = subtotal + tax;

    // Display the tax
    $('.id-tax-price').text(tax.toFixed(2));

    // Display the total
    $('.id-total-price').text(total.toFixed(2));

    // Set the total price to the hidden input value
    $('#totalprice').val(total.toFixed(2));

}



$(function() { 
    $(".numberofwash").on("change keyup", expressCalculate);
    $('input[type="radio"][name="service"]').on("click", expressCalculate);
});



  function fdCalculate() {
    // Get the value of selected radio button
    var servicesprice = parseFloat($('input[name="service"]:checked').val()) || 0;
    var howMany = parseFloat($('.fdnumberofwash').val()) || 0;
    var radioValue = servicesprice * howMany;
    $('.howmanyqty').html(howMany);

    // Get the values of selected checkboxes
    var checkboxValues = $('input[type="checkbox"]:checked').map(function(){
        return parseFloat($(this).val()) || 0;
    }).get(); 

    // Calculate the total
    var subtotal = radioValue + checkboxValues.reduce(function(acc, val) {
        return acc + val;
    }, 0);

    // Add tax based on subtotal value
    var tax = 0;
    if (subtotal <= 200) {
        tax = 50;
    } else {
        tax = 25;
    }

    var total = subtotal + tax;

    // Display the tax
    $('.id-tax-price').text(tax.toFixed(2));
    // Display the total
    $('.id-total-price').text(total.toFixed(2));
    // Set the total price to the hidden input value
    $('#totalprice').val(total.toFixed(2));
}



  $(function()
  {
    $(".fdnumberofwash").on("change keyup",fdCalculate);
    $('input[type="radio"][name="service"]').on("click", fdCalculate);
  });


  function deconCalculate() {
    // Get the value of selected radio button
    var servicesprice = parseFloat($('input[name="service"]:checked').val()) || 0;
    var howMany = parseFloat($('.deconnumberofwash').val()) || 0;
    var radioValue = servicesprice * howMany;
    $('.howmanyqty').html(howMany);

    // Get the values of selected checkboxes
    var checkboxValues = $('input[type="checkbox"]:checked').map(function(){
        return parseFloat($(this).val()) || 0;
    }).get(); 

    // Calculate the subtotal
    var subtotal = radioValue + checkboxValues.reduce(function(acc, val) {
        return acc + val;
    }, 0);

    // Add tax based on subtotal value
    var tax = 0;
    if (subtotal <= 200) {
        tax = 50;
    } else {
        tax = 25;
    }

    var total = subtotal + tax;

    // Display the tax
    $('.id-tax-price').text(tax.toFixed(2));

    // Display the total
    $('.id-total-price').text(total.toFixed(2));
    // Set the total price to the hidden input value
    $('#totalprice').val(total.toFixed(2));
}



  $(function()
  {
    $(".deconnumberofwash").on("change keyup",deconCalculate);
    $('input[type="radio"][name="service"]').on("click", deconCalculate);
  });



function lioCalculate() {
    // Get the value of selected radio button
    var servicesprice = parseFloat($('input[name="service"]:checked').val()) || 0;
    var howMany = parseFloat($('.lionumberofwash').val()) || 0;
    var radioValue = servicesprice * howMany;
    $('.howmanyqty').html(howMany);

    // Get the values of selected checkboxes
    var checkboxValues = $('input[type="checkbox"]:checked').map(function(){
        return parseFloat($(this).val()) || 0;
    }).get(); 

    // Calculate the subtotal
    var subtotal = radioValue + checkboxValues.reduce(function(acc, val) {
        return acc + val;
    }, 0);

    // Add tax based on subtotal value
    var tax = 0;
    if (subtotal <= 200) {
        tax = 50;
    } else {
        tax = 25;
    }

    var total = subtotal + tax;

    // Display the tax
    $('.id-tax-price').text(tax.toFixed(2));

    // Display the total
    $('.id-total-price').text(total.toFixed(2));
    // Set the total price to the hidden input value
    $('#totalprice').val(total.toFixed(2));
}

  $(function()
  {
    $(".lionumberofwash").on("change keyup",lioCalculate);
    $('input[type="radio"][name="service"]').on("click", lioCalculate);
  });


function lidCalculate() {
    // Get the value of selected radio button
    var servicesprice = parseFloat($('input[name="service"]:checked').val()) || 0;
    var howMany = parseFloat($('.lidnumberofwash').val()) || 0;
    var radioValue = servicesprice * howMany;
    $('.howmanyqty').html(howMany);

    // Get the values of selected checkboxes
    var checkboxValues = $('input[type="checkbox"]:checked').map(function(){
        return parseFloat($(this).val()) || 0;
    }).get(); 

    // Calculate the subtotal
    var subtotal = radioValue + checkboxValues.reduce(function(acc, val) {
        return acc + val;
    }, 0);

    // Add tax based on subtotal value
    var tax = 0;
    if (subtotal <= 200) {
        tax = 50;
    } else {
        tax = 25;
    }

    var total = subtotal + tax;

    // Display the tax
    $('.id-tax-price').text(tax.toFixed(2));

    // Display the total
    $('.id-total-price').text(total.toFixed(2));
    // Set the total price to the hidden input value
    $('#totalprice').val(total.toFixed(2));
}



  $(function()
  {
    $(".lidnumberofwash").on("change keyup",lidCalculate);
    $('input[type="radio"][name="service"]').on("click", lioCalculate);
  });
2

You will have to provide more context. We also can’t test the code without the HTML.

4

Open up the browser console and read the error message.

https://api.jquery.com/change-shorthand/

6

Well, it isn’t onchange().

The old depreciated method is change() but the currently suggested way is on("change", someHandler)

$(document).ready(function () {
  // Bind change event to radio buttons and checkboxes
  $('input[type="checkbox"], input[name="service"]').on("change", function () {
    calculate();
  });
});
9

Not sure what you mean. Which function isn’t working as expected?

Also, you have selectors in your code that isn’t in the HTML you posted, so you must not have posted it all.

Anyway, put in some console logs and try to debug your code.