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

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

2. propecia vs rogaine – http://propechl.com/ propecia reviews

   Reply