Currently, I am in the process of developing a form that enables users to select various services and see the total cost displayed. At the moment, I have managed to calculate the running total for one service selected from a dropdown menu. However, I am encountering difficulties in adding up costs from multiple services chosen from different dropdown menus simultaneously. For instance, if a user selects '3' from one dropdown menu, it should be multiplied by 10 (already implemented), and then if they choose '4' from another dropdown menu, it should be multiplied by a specific value and the total cost displayed.
Here is the Fiddle link for reference: https://jsfiddle.net/7jrch7w6/
As someone who is new to JavaScript and JQuery, any suggestions on improving my approach or code quality are welcome. Thank you in advance!
Below is the snippet of the code:
<form>
<div id="carpet-services">
<div class="form-group">
<!--how many bedrooms-->
<label class="control-label" for="carpet_cleaning">Bedrooms</label>
<select class="form-control" id="carpet_cleaning">
<option value="0-bedroom">0</option>
<option value="1-bedroom">1</option>
<option value="2-bedroom">2</option>
</select>
<label class="hide" for="0-bedroom">0</label>
<label class="hide" for="1-bedroom">1</label>
<label class="hide" for="2-bedroom">2</label>
<!--how many dining rooms-->
<label class="control-label" for="dining_rooms">Dining Rooms</label>
<select class="form-control" id="dining_rooms">
<option value="0-diningRoom">0</option>
<option value="1-diningRoom">1</option>
<option value="2-diningRoom">2</option>
</select>
<label class="hide" for="0-diningRoom">0</label>
<label class="hide" for="1-diningRoom">1</label>
<label class="hide" for="2-diningRoom">2</label>
</div>
</div>
<h4>Total Price</h4>
<p id="output1"></p>
JS
$("#carpet_cleaning").change(function () {
var bedrooms = $("#carpet_cleaning").val();
var diningRooms = $("#dining_rooms").val();
var bedroomPrice = '';
var diningRoomPrice = '';
if (carpet_cleaning){
var bedroomsLabel = $("label[for="+bedrooms+"]").text();
bedroomPrice = 'Your price quote is: ' + bedroomsLabel * 10;
}
$("#output1").text(bedroomPrice).fadeIn();
});
One line of CSS:
label.hide {display: none;}