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);


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

  1. For numeric inputs, I used the input event instead of the change event.

    $('#monthlyImpressionCostDiv').on('input', 'input[name=monthly_impressions_cost]', function() {
    
         if ($(this).val().length > 0) {
             monthlyImpressionCost = parseFloat($(this).val());        
         }
         else
            monthlyImpressionCost = 0;
            cal();
    });
    

    And I put a value calculation function that is called with every change

    function cal()
    {
        totalPrice = packagePrice + creativeImageSetPrice +
           micrositeLandingPagePrice + setupFee + depositAmount +
           monthlyImpressionCost;
    
        $('#campaign_total_amount span').text(totalPrice);
    }
    

    Full code

    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());
            }
            else
              packagePrice = 0;
             cal();
        });
    
        //console.log(packagePrice);
    
        let $creativeNeedsDiv = $('#creativeNeeds');
    
        $creativeNeedsDiv.on('change', 'input[name=creative_image_set]', function() {
    
            if ($(this).is(':checked')) {
                creativeImageSetPrice = parseFloat($(this).val());
            }
            else
               creativeImageSetPrice = 0;
            cal();
        });
    
        $creativeNeedsDiv.on('change', 'input[name=microsite_landingpage]', function() {
    
            if ($(this).is(':checked')) {
                micrositeLandingPagePrice = parseFloat($(this).val());
            }
            else
              micrositeLandingPagePrice = 0;
            cal();
        });
    
        setupFee = parseFloat($('#setup_fee').val());
    
        $('#depositAmountDiv').on('input', 'input[name=deposit_amount]', function() {
    
            if ($(this).val().length > 0) {
                depositAmount = parseFloat($(this).val());
            }
            else
               depositAmount = 0;
           cal();
        });
    
        $('#monthlyImpressionCostDiv').on('input', 'input[name=monthly_impressions_cost]', function() {
    
            if ($(this).val().length > 0) {
                monthlyImpressionCost = parseFloat($(this).val());        
            }
            else
               monthlyImpressionCost = 0;
             cal();
        });
    
        
        function cal()
        {
            totalPrice = packagePrice +
                     creativeImageSetPrice +
                     micrositeLandingPagePrice +
                     setupFee +
                     depositAmount +
                     monthlyImpressionCost;
    
             $('#campaign_total_amount span').text(totalPrice);
        }
    <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="">campaign package
    
    
            <input class="form-check-input" id="campaign_package" name="campaign_package" type="radio" data-packageid="1" data-package="business_dominators_pkg" value="0" required="">no campaign package
        </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 style="font-size:14px;color:green;">300</span></div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    Reply

Leave a Comment