Find total of dropdown selection values with jquery

Question

I'm creating a form that allows a user to select an amount of services, and then a total is displayed. I have it working to where I can keep the running total of one drop down menu service, but then I can't figure out how to add additional services from other drop down menus. For example, I need it so that if someone selects '3' from one drop down menu, it will times that value by 10 (I have that part done), but then also be able to select a '4' from the next dropdown menu and times that by a value, and then display a total.

Fiddle: https://jsfiddle.net/7jrch7w6/

I'm very new to JavaScript and JQuery, so feel free to give suggestions if you see a better way or if my code is garbage. Thanks!

Here's my 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;}

Fuzzy · Accepted Answer · 2017-04-04 21:08:33Z

First of all, there's no need to use labels for every drop down option, that's what value attribute is for:

<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">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                        <!--how many dining rooms-->
                        <label class="control-label" for="dining_rooms">Dining Rooms</label>
                        <select class="form-control" id="dining_rooms">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
         </div>
      </div>

        <h4>Total Price</h4>
          <p id="output1"></p>
  </form>

Calculation can now be simplified and properly hooked up to change event of both drop downs:

$("#carpet_cleaning,#dining_rooms").change(function () {
        var bedrooms = $("#carpet_cleaning").val();
        var diningRooms = $("#dining_rooms").val();

        var total = bedrooms * 10 + diningRooms * 20;
        var totalPrice = 'Your price quote is: ' + total;

        $("#output1").text(totalPrice).fadeIn();
});

Thanks for the tip. Like I said, I'm new to this so I really appreciate the feedback

Dmyan · Accepted Answer · 2017-04-04 21:09:23Z

0

I don't know if I got your question, but you can use $("#carpet_cleaning option:selected").val() to get the current selected value in a select component.

Fiddle: https://jsfiddle.net/7jrch7w6/4/

$("#carpet_cleaning").change(function () {
  UpdateResult();
});

$("#dining_rooms").change(function () {
    UpdateResult();
});

function UpdateResult()
{
    var result = 'Your price quote is: ' + (($("#carpet_cleaning option:selected").val() * 10) + ($("#dining_rooms option:selected").val() * 20))
    $("#output1").text(result).fadeIn();
}

answered Apr 4, 2017 at 21:09

Dmyan

1,13410 silver badges15 bronze badges

Collectives™ on Stack Overflow

Find total of dropdown selection values with jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related