How to total product / service cost radio button checkboxes and text input fields using jquery

I’ve created a form with a dynamically generated radio button group, 2 checkboxes and 3 text input fields and I’m having a hard time finding a solution to how to total up these fields using JQuery. I either get nothing, NaN or two or more values to concatenate. I’ve tried more examples I’ve found on the internet than I can count. Could someone please tell me what I’m doing wrong?

Html

   <div id="campaignPackageList" class="campaign-package-list form-group">
        <input class="form-check-input" id="campaign_package" name="campaign_package" type="radio" data-packageid="1" data-package="business_dominators_pkg" value="23988" required="">
    </div>

    <div id="creativeNeeds" class="form-group">
        <label class="required">What are the client's creative needs?</label>
        <div class="form-check">
            <input class="form-check-input" id="creative_image_set" name="creative_image_set" type="checkbox" value="300.00">
            <label class="form-check-label" for="creative_image_set">Creative: 5 Image Ad Set Designed by Landmarks - $300.00</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" id="microsite_landingpage" name="microsite_landingpage" type="checkbox" value="800.00">
            <label class="form-check-label" for="microsite_landingpage">Micro Site/Landing Page Designed by Landmarks - $800.00</label>
        </div>
    </div>

    <div class="form-group w-25">
       <label class="required" for="setup_fee">Setup Fee (Per Individual Campaign)</label>
       <input class="form-control" id="setup_fee" name="setup_fee" type="number" value="300.00" readonly="">
    </div>

    <div id="depositAmountDiv" class="form-group w-25">
         <label class="required" for="deposit_amount">Deposit Amount</label>
         <input class="form-control " id="deposit_amount" name="deposit_amount" type="number" value="" required="">
    </div>

    <div id="monthlyImpressionCostDiv" class="form-group w-25">
         <label class="required" for="monthly_impressions_cost">Monthly Impression Cost</label>
         <input class="form-control " id="monthly_impressions_cost" name="monthly_impressions_cost" type="number" value="" required="">
    </div>

    <div class="form-group mb-3 w-25">
        <label>Campaign Total Amount</label>
        <div id="campaign_total_amount"><span>300</span></div>
    </div>

JavaScript

    let totalPrice = 0;
    let packagePrice = 0;
    let creativeImageSetPrice = 0;
    let micrositeLandingPagePrice = 0;
    let setupFee = 0;
    let depositAmount = 0;
    let monthlyImpressionCost = 0;

    $('#campaignPackageList').on('click', 'input[name=campaign_package]', function() {

        if ($(this).is(':checked')) {
            packagePrice =  parseFloat($(this).val());
        }

    });

    console.log(packagePrice);

    let $creativeNeedsDiv = $('#creativeNeeds');

    $creativeNeedsDiv.on('change', 'input[name=creative_image_set]', function() {

        if ($(this).val()) {
            creativeImageSetPrice = parseFloat($(this).val());
        }

    });

    $creativeNeedsDiv.on('change', 'input[name=microsite_landingpage]', function() {

        if ($(this).val()) {
            micrositeLandingPagePrice = parseFloat($(this).val());
        }

    });

    setupFee = parseFloat($('#setup_fee').val());

    $('#depositAmountDiv').on('change', 'input[name=deposit_amount]', function() {

        if ($(this).val()) {
            depositAmount = parseFloat($(this).val());
        }

    });

    $('#monthlyImpressionCostDiv').on('change', 'input[name=monthly_impression_cost]', function() {

        if ($(this).val()) {
            monthlyImpressionCost = parseFloat($(this).val());
        }

    });

    totalPrice = packagePrice +
                 creativeImageSetPrice +
                 micrositeLandingPagePrice +
                 setupFee +
                 depositAmount +
                 monthlyImpressionCost;

    $('#campaign_total_amount span').text(totalPrice);


1 thought on “How to total product / service cost radio button checkboxes and text input fields using jquery”

Leave a Comment