CODEWITHSUNDEEP
jqueryhtml
Innocent Monareng
Innocent Monareng

Reputation: 139

How can I have jQuery calculation results display based on default selections

I use the code below to calculate value of business cards based on the user's selection. The user customize options using radio buttons, the values of the checked radio buttons is then used to calculate the net price, vat and total price. These values are then displayed in a div. There are radio buttons selected by default however the prices only start showing once the user click on one of the radio buttons. Since there are default options selected, how can I have the prices corresponding to these option display when the page load? 

$(document).ready(function() {

  $('input[form="businessCards"]').click(function() {


    var totalNetPrice = designLayoutPrice + printRunPrice + printedSidesPrice + paperWeightPrice + refiningPrice + processingPrice + deliveryMethodPrice;
    $(".totalNetPrice").html(totalNetPrice.toFixed(2));

    var vat = totalNetPrice * 0.14;
    $(".vat").html(vat.toFixed(2));

    var totalPrice = totalNetPrice + vat;
    $(".totalPrice").html(totalPrice.toFixed(2));

  });   

});

I tried adding adding the following but does work.

$(document).ready(function() {

  // display default option values
  $(".totalNetPrice").html.(totalNetPrice); 
  $(".vat").html.(vat);
  $(".totalPrice").html.(totalPrice);

  $('input[form="businessCards"]').click(function() {


    var totalNetPrice = designLayoutPrice + printRunPrice + printedSidesPrice + paperWeightPrice + refiningPrice + processingPrice + deliveryMethodPrice;
    $(".totalNetPrice").html(totalNetPrice.toFixed(2));

    var vat = totalNetPrice * 0.14;
    $(".vat").html(vat.toFixed(2));

    var totalPrice = totalNetPrice + vat;
    $(".totalPrice").html(totalPrice.toFixed(2));

  });   

});

Upvotes: 0

Views: 75

Answers (1)

ᴄʀᴏᴢᴇᴛ
ᴄʀᴏᴢᴇᴛ

Reputation: 2999

you can trigger the click event manually so the price will be computed with default values.

$(document).ready(function() {

  $('input[form="businessCards"]').click(function() {


    var totalNetPrice = designLayoutPrice + printRunPrice + printedSidesPrice + paperWeightPrice + refiningPrice + processingPrice + deliveryMethodPrice;
    $(".totalNetPrice").html(totalNetPrice.toFixed(2));

    var vat = totalNetPrice * 0.14;
    $(".vat").html(vat.toFixed(2));

    var totalPrice = totalNetPrice + vat;
    $(".totalPrice").html(totalPrice.toFixed(2));

  }).click(); // trigger event

});

Upvotes: 1

Related Questions