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);
For numeric inputs, I used the
input
event instead of thechange
event.And I put a value calculation function that is called with every change
Full code
propecia vs rogaine – http://propechl.com/ propecia reviews