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

Ways to verify the input fields across multiple tabs

Utilizing jquery validate along with jquery tabs to construct a multi-tab form. Consider a basic form : tab 1 for entering address, tab 2 for entering name, tab 3 for submission HTML <ul class="nav nav-tabs"> <li class="active"><a hr ...

javascriptjqueryjquery-validate

How to access the CSS and JS files in the vendor folder using linemanjs

Currently, I am in the process of developing a web application utilizing linemanjs. However, I have encountered an issue where the vendor css and js files are not being referenced correctly when explicitly included. I would appreciate any guidance on what ...

javascripthtmlcssnode.jslinemanjs

Is the img tag supported by html2image?

I've been diving into the functionality of the html2image package and noticed that it's having trouble locating my locally stored images. My code snippet looks like this: from html2image import Html2Image hti = Html2Image() html_str = "&q ...

pythonhtml

Delivering HTML, CSS, and JS through the power of Node.js and Express.js

const express = require('express'); const path = require('path'); const app = express (); app.use(express.json('public')) app.get('/PKorn/zealtech', function(req, res) { res.sendFile(path.join(__dirname, &a ...

htmlcssnode.js

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

How can I achieve a scrolling behavior similar to the one demonstrated here? When scrolling through the sidebar, I want it to continue scrolling until it reaches the end. After that, any further scrolling on the sidebar should scroll the main panel inste ...

javascripthtmlcssscroll

Attempting to execute code on a database using PHP and MySQL

Hey there! I am just diving into the world of HTML and PHP, attempting to create a page that can execute an SQL query to transfer data from one table to another. However, I'm facing some difficulties in making it work as I need a user-provided date t ...

phphtmlmysqli

React does not play well with the Sendgrid Node.js library

Seeking assistance with integrating node.js to handle email sending on my website. Interested in having the email form immediately send upon submission, rather than using the standard "mailto" action. Utilizing Sendgrid as the email service for API and ser ...

javascriptnode.jsreactjswebpacksendgrid

What causes directive templates to be fetched from the server at times (resulting in a 304 response), while other times they are retrieved from the browser cache without

I've noticed that when I reload the page, Angular directive templates load in two different ways. The first way is when the browser sends a request to the server and receives a 304 response - everything works fine. However, the second way is puzzlin ...

javascriptangularjsangularjs-directivebrowser-cache

What is the best way to activate a click event in Vue.js?

Hey there! I'm facing a situation where I have a button within the child component that emits an event when clicked. Is there a way to trigger this event when the parent component is mounted? Alternatively, is there another method to achieve this goal ...

javascriptvue.jsvuejs2vue-component

CSS animations - transitioning opacity in and out

Looking to add some CSS animations to a menu but running into some issues. I've got the code below for the menu to fade in on hover, but can't quite figure out how to make it fade out smoothly as well. I've tried a few approaches, but all I ...

htmlcsscss-animations

The datepicker function is malfunctioning in a div that has been dynamically loaded through

I am experiencing an issue with loading a div populated by ajax. The datepicker does not seem to be called when the content is loaded this way. Initially, I had the datepicker loaded in the header of the main page, but even after trying to load it within ...

javascriptjqueryajaxdatepicker

Is it feasible to maintain a variable as a reference across views while utilizing ng-view?

I am facing a unique challenge: I have a webpage with two tabs that need to utilize ng-view from AngularJS. The twist is that both tabs must share the same variable, similar to referencing a variable in C# using the "ref" keyword. If you want to see an ex ...

javascriptangularjsng-view

The sonar scanner encountered an error while attempting to parse a file using the espree parser in module mode

While executing sonar-scanner on a node project, I encounter a Failed to parse file issue, as shown below: ERROR: Failed to parse file [file:///home/node-app/somedir/index.js] at line 1: Unexpected token './AddCat' (with espree parser in mod ...

javascriptnode.jssonarqubesonarscanner

Are you encountering a malfunctioning AJAX Function? Seeking assistance with PHP/MySQL

I have a PHP-generated form that needs to submit data using AJAX. Here's what I have so far... PHP Form <div class="user"> <span>Start a friendship with '.$row['screen_name'].'</span> <form method="PO ...

phpjqueryajax

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

javascriptjqueryhtmlcss

Tips for Troubleshooting External Evaluation Scripts

For a specific example, take a look at the haystack.js script from How Big is Your Haystack? I've been searching for a solution and it seems that using the //# sourceURL=name.js comment is the way to go. However, I am struggling with the process of a ...

javascriptgoogle-chrome-devtools

Display an empty string when a value is NULL using jQuery's .append() function

To set an HTML value using the .append() function, I need to include AJAX data values. If the data set contains a null value, it will show as 'null' in the UI. I want to remove that 'null' and display it as blank. However, I can't ...

javascripthtmljqueryajax

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite atte ...

htmlcssbootstrap-4

Unlocking the Power of jQuery's toggle Method for Dynamic Functionality

For my project, I require numerous jQuery toggles to switch between text and icons. Currently, I am achieving this by using: $("#id1").click(function () { //Code for toggling display, changing icon and text }); $("#id2").click(function () { //Same co ...

javascriptjqueryhtmltoggle

placing a dropdown menu below the search bar

Let's say I have a container with an input search field. My goal is to position a select dropdown right below the search input, ensuring that the dropdown has the same width as the search input (similar to autocomplete functionality). Here's what ...

htmlcsstwitter-bootstrapbootstrap-4