Is there a way for me to implement this code to achieve the functionality shown in the demo link

$('select').change(function() {
  var sum = 0;
  var sum = parseInt($('select[name="bathrooms"]').val() * 25) + parseInt($('select[name="bedrooms"]').val() * 8);
  $("#sum").html(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 col-md-4 col-lg-3">
  <label>Bedrooms</label>
  <select class="form-control bedrooms-count" name="bedrooms" id="booking-field-bedrooms">
  <option value="0"  >0</option>
  <option value="1"  selected>1</option>
  <option value="2"  >2</option>
  <option value="3"  >3</option>
  <option value="4"  >4</option>
  <option value="5"  >5</option>
  </select>
</div>
<div class="col-sm-4 col-md-4 col-lg-3">
  <label>Bathrooms</label>
  <select id="booking-field-bathrooms" class="form-control bathrooms-count" name="bathrooms">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
</select>
  
</div>
  <div class="col-sm-4 col-md-4 col-lg-5 set-frequency-wrapper">
  <label>Set Frequency</label>
  <select class="form-control booking-field-frequency" name="method" id="booking-field-frequency">
<option value="mini" selected="selected">MINI DELUXE</option>
<option value="deluxe">DELUXE(SPRING CLEAN)</option>
<option value="bond">BOND CLEANING</option>
</select>
</div>

<!--add-booking-step-1 closed-->
<div class="add-booking-step-2">
  <h3 class="section-title-info">Extras</h3>
  <div class="service-listing oven-in-service">
    <label id="term-1">
<input id="term-1" name="oveninservice" type="checkbox" class="clean-addons" value="60"/>
Oven in Service
</label>
  </div>
  <div class="service-listing oven-only">
    <label>
<input id="term-2" type="checkbox" class="clean-addons" value="2"/>
Oven Only
</label>
  </div>
  <div class="service-listing windows-int-ext">
    <label>
<input id="term-3" type="checkbox" class="clean-addons" value="3"/>
Windows Int/Ext
</label>
  </div>
  <div class="service-listing kitchen">
    <label>
<input id="term-4" type="checkbox" class="clean-addons" value="4"/>
Kitchen
</label>
  </div>
  <div class="service-listing walls">
    <label>
<input id="term-5" type="checkbox" class="clean-addons" value="5"/>
Walls
</label>
  </div>
  <div class="service-listing rangehood">
    <label>
<input id="term-6" type="checkbox" class="clean-addons" value="6"/>
Rangehood
</label>
  </div>
  <div class="service-listing sweep-garage">
    <label>
<input id="term-7" type="checkbox" class="clean-addons" value="7"/>
Sweep Garage
</label>
  </div>
  <div class="service-listing fans">
    <label>
<input id="term-8" type="checkbox" class="clean-addons" value="8" />
Fans
</label>
  </div>
  <div class="service-listing lights">
    <label>
<input id="term-9" type="checkbox" class="clean-addons" value="9" />
Lights
</label>
  </div>
  <div class="service-listing toilets">
    <label>
<input id="term-10" type="checkbox" class="clean-addons" value="10" />
Toilets
</label>
  </div>
  <div class="service-listing mirrors">
    <label>
<input id="term-11" type="checkbox" class="clean-addons" value="11" />
Mirrors
</label>
  </div>
  <div class="service-listing lounge">
    <label>
<input id="term-12" type="checkbox" class="clean-addons" value="12" />
Lounge
</label>
  </div>
  <div id='sum'></div>

PRICE LIST

Bathroom                              $ 25  
Bedroom                               $ 8  
Oven in Service                       $ 60  
Oven Only                             $ 80       
Windows Int/Ext                       $ 7.5  
Kitchen                               $ 20  
Walls                                 $ 5  
Rangehood                             $ 17.5  
Sweep Garage                          $ 7.5  
Fans                                  $ 5  
Lights                                $ 3.5  
Toilets                               $ 12.5  
Mirrors                               $ 3.5  
Lounge                                $ 7.5

I need to configure the amount like this.

Demo Link -

javascriptjqueryhtmlcssajax

Answer №1

To correctly calculate the values, make sure to parse them accurately: 

var sum = parseInt($('select[name="bathrooms"]').val(), 10) * 25 +
           parseInt($('select[name="bedrooms"]').val(), 10) * 8;
// Add checkbox values to the sum
sum += parseInt($(':checkbox:checked').val(), 10) || 0; // add checked value or 0


$('select, :checkbox').change(function() {
  var sum = parseInt($('select[name="bathrooms"]').val(), 10) * 25 + parseInt($('select[name="bedrooms"]').val(), 10) * 8 || 0;
  $(':checkbox:checked').each(function() {
    sum += parseInt(this.value, 10) || 0;
  });
  $("#sum").html(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 col-md-4 col-lg-3">
  <label>Bedrooms</label>
  <select class="form-control bedrooms-count" name="bedrooms" id="booking-field-bedrooms">
  <option value="0"  >0</option>
  <option value="1"  selected>1</option>
  <option value="2"  >2</option>
  <option value="3"  >3</option>
  <option value="4"  >4</option>
  <option value="5"  >5</option>
  </select>
</div>
<div class="col-sm-4 col-md-4 col-lg-3">
  <label>Bathrooms</label>
  <select id="booking-field-bathrooms" class="form-control bathrooms-count" name="bathrooms">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
</select>
</div>
<div class="col-sm-4 col-md-4 col-lg-5 set-frequency-wrapper">
  <label>Set Frequency</label>
  <select class="form-control booking-field-frequency" name="method" id="booking-field-frequency">
<option value="mini" selected="selected">MINI DELUXE</option>
<option value="deluxe">DELUXE(SPRING CLEAN)</option>
<option value="bond">BOND CLEANING</option>
</select>
</div>

<!--add-booking-step-1 closed-->
<div class="add-booking-step-2">
  <h3 class="section-title-info">Extras</h3>
  <div class="service-listing oven-in-service">
    <label id="term-1">
<input id="term-1" name="oveninservice" type="checkbox" class="clean-addons" value="60"/>
Oven in Service
</label>
  </div>
  <div class="service-listing oven-only">
    <label>
<input id="term-2" type="checkbox" class="clean-addons" value="2"/>
Oven Only
</label>
  </div>
  
  (remaining checkboxes with their respective values and labels)
 
  <div id='sum'></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Place a fresh banner on top of the Ionicon icon

I recently started using Ionicons from and I am not too familiar with css. My question is, can a banner that says 'new' be overlaid on the top right corner of the Icon? Is there a simple or standard method to achieve this? (whether it's an ...

htmlcssfaviconionicons

Performing an AJAX request to send data containing special characters

What is the best way to send a large string with special characters like '%' and '&' to my PHP page using AJAX POST? In simple terms, how can I encode these characters in JavaScript and then decode them in PHP? ...

javascriptajaxspecial-charactersencode

Navigate to a specific position with a single click by accessing a class from another Vue component

Clarification of the issue When a user clicks on the login link, the view should automatically scroll down to the login window where they can input their credentials. I know how to achieve this in a single file using document.getElementById('login-w ...

javascriptvue.js

The spinning loading wheel on Firefox persists even after submitting the iFrame

I have encountered a strange issue with Firefox that I can't seem to figure out. In my system, AJAX is used to send data to a PHP API. However, when file uploads are involved, Firefox does not use XMLHttpRequest() and instead reverts to submitting the ...

phpjavascriptajaxfirefoxdom

Firestore - Using arrayUnion() to Add Arrays

Is there a way to correctly pass an array to the firebase firestore arrayUnion() function? I encountered an issue while attempting to pass an array and received the following error message: Error Error: 3 INVALID_ARGUMENT: Cannot convert an array value ...

javascriptfirebasegoogle-cloud-firestore

Highcharts-ng allows us to create charts without using the traditional syntax such as $('#container').high

After setting up the chart's configuration in my controller, I am facing an issue. The HighCharts-ng (an angularJS directive for HighCharts) has a method that I want to implement: $scope.ohlcChartConfig = { options: {....... I ne ...

javascriptangularjshighchartshighcharts-ng

Creating XPaths for HTML using Selenium: A step-by-step guide

What is the proper way to create an xpath expression for the following block of html? <li> <a href="/parade/storeus/browse/Home-Accents-Radios/_/N-1c7kmv"> Radios </a> </li> ...

htmlseleniumselenium-webdriverwebdriver

Developing with Phonegap Build: A Guided Process

With all the conflicting information available, I am seeking clarity on this topic. Objective: To create and enhance a Phonegap app using Phonegap Build. 1) My preference is to utilize Phonegap Build without needing to install Android and iOS SDKs. 2) I ...

javascripthtmlmobilecordova

Scroll through the div to quickly find the relevant content

I have implemented the following HTML structure: <div style="height:200px;overflow-y:scroll;"> <table>.....</table> </div> By using this setup, I am aiming to replicate the functionality of an expanded <select> control wit ...

javascriptjqueryhtmlcssscrollable

How can I prevent an endless loop in jQuery?

Look at the code snippet below: function myFunction(z){ if(z == 1){ $(".cloud").each(function(index, element) { if(!$(this).attr('id')){ $(this).css("left", -20+'%'); $(this).next('a').css ...

javascriptjquerycssanimation

Typescript Routing Issue - This call does not match any overloads

Need assistance with redirecting to a sign-up page upon button click. Currently encountering a 'no overload matches this call' error in TypeScript. Have tried researching the issue online, but it's quite broad, and being new to Typescript ma ...

javascriptreactjstypescriptroutes

Utilize AJAX to retrieve PHP information through a request

Hello everyone! I'm currently experimenting with using AJAX to retrieve a PHP file and execute some functions. This is how my AJAX code looks: $(document).ready(function(){ $(".claim-button").click(function(){ alert("You clicked okay!"); ...

phpjqueryajaxfunction

The ng-app directive for the Angular project was exclusively located in the vendor.bundle.js.map file

Currently, I am diving into an Angular project that has been assigned to me. To get started, I use the command "gulp serve" and then access the development server through Chrome by clicking on "http://localhost:3000". During my investigation in Visual Stu ...

javascriptangularjsvisual-studio-codeng-app

IE6 disrupts stored layouts

I've encountered a strange issue with my design in IE6. It loads perfectly at first, but after reloading it a couple of times, everything suddenly collapses. The strange part is that when I upload an updated version, it fixes the issue, only to break ...

htmlcsslayoutinternet-explorer-6

"After completing the survey form, the User Details form is displayed upon clicking the submit button

In my Quiz, each question loads on a separate page with clickable options. Some questions may have multiple answers, including an "Others" option. At the end of the quiz, users need to fill out a form. Although I've created a survey form, I'm fa ...

javascriptjqueryhtmlcssforms

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

cssreactjsnext.jsgsapframer-motion

What could be the reason for my code generating the error [$http:badreq]?

I'm currently attempting to retrieve JSON data from a certain URL and am having trouble getting it to work. Despite going through the Angular documentation and other resources, I still can't pinpoint the issue due to my limited experience with An ...

javascriptangularjs

Exploring the distinctions between ajax, await, async, and

English is not my strong suit, so please bear with me if my writing seems odd. We have discovered two methods for transitioning from asynchronous ajax calls to synchronous ones. Using async: false Utilizing await Both achieve the same outcome, but I am ...

javascriptajaxfunctionasync-awaitsynchronization

Retrieve information using an AJAX call

There is JSON data stored in a file that I need to read. The correct file data is printed to the console.log. What steps should I take to assign this data to variable x? Currently, when I execute the code, x ends up being undefined. function getData() { ...

javascriptjqueryajaxfile

Customize button appearance within mat-menu in Angular versions 2 and above

Is there a way to style my mat-menu to function similar to a modal dialog? I am having difficulty with the styling aspect and need advice on how to move the save and reset buttons to the right while creating space between them. I have attempted to apply st ...

cssangularangular-materialstyles