CODEWITHSUNDEEP
jquery
kanarifugl
kanarifugl

Reputation: 9987

Get value from select box and add to total with jQuery

I have managed to get this code up and running, which in short calculates the total price of cleaning a house based on it's size. Now i want to add an second option: choosing desired time of day, but i'm not sure how to proceed and connect the two different form elements.

This is how my code looks like now:

$(document).ready(function(){

    $("#order").on('input', function(){
        var kvm2 = parseInt($('#kvm2').val()) || 0;
        var min_price = 299;
        var kvm2_price;
        if(kvm2 > 100) {
            kvm2_price = 6;
        }
        if(kvm2 > 200) {
            kvm2_price = 4;
        }       
        if(kvm2 <= 100) {
            kvm2_price = 7;
        }
        var total = (kvm2_price * kvm2).toFixed(2);
        if(total < min_price) {
            $('#total').html(min_price);
        }
        else {
            $('#total').html(total);
        }
    }); 
});

This is the select box I want to add: 

 <select name="timeslot" class="form-control form-control-lg">
    <option value="1">Dagtid (08 - 15) 0kr</option>
    <option value="2">Formiddag (12 - 15) 39kr</option>
    <option value="3">Ettermiddag (16 - 18) 39kr</option>
    <option value="4">Kveld (19 - 24) 129kr</option>
  </select>

Based on the option you choose, either 0kr, 39kr or 129kr should be added on top of the total sales price.

Upvotes: 0

Views: 56

Answers (2)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with the jsfiddle https://jsfiddle.net/5orednbn/

**HTML**
<div id="subTotal">SubTotal: <span>200</span></div>
<select name="timeslot" class="form-control form-control-lg">
    <option value="0">Dagtid (08 - 15) 0kr</option>
    <option value="39">Formiddag (12 - 15) 39kr</option>
    <option value="39">Ettermiddag (16 - 18) 39kr</option>
    <option value="129">Kveld (19 - 24) 129kr</option>
</select>

<button type="button" id="order" value="submit" >Submit</button>

<div id="grandTotal">Total: <span></span></div>


**JS**
$("#order").on('click', function(){
    var subtotal = parseFloat($('#subTotal > span').text());
    var timeSlot = parseFloat($('select[name="timeslot"] option:selected').val());

    $('#grandTotal > span').html( subtotal + timeSlot);
});

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

Declare total as a global, then add to it in the second function, and update the value in the element. For simplicity, the code below just gives total an initial value, as though your first function had run. Then, select a time slot, and the additional fee is added and is displayed in the total element. Note - you need to keep the total variable as the output of the first function, or the total will keep increasing if the user changes the time option several times.

var total = 100;
  /*$("#order").on('input', function() {
    var kvm2 = parseInt($('#kvm2').val()) || 0;
    var min_price = 299;
    var kvm2_price;
    if (kvm2 > 100) {
      kvm2_price = 6;
    }
    if (kvm2 > 200) {
      kvm2_price = 4;
    }
    if (kvm2 <= 100) {
      kvm2_price = 7;
    }
    total = (kvm2_price * kvm2).toFixed(2);
    if (total < min_price) {
      $('#total').html(min_price);
    } else {
      $('#total').html(total);
    }
  });*/


  $('#timeslot').on('change', function() {
    extra = $(this).val();
    switch (extra) {
      case '1':
        add = 0;
        break;
      case '2':
      case '3':
        add = 39;
        break;
      case '4':
        add = 129;
        break;
    }
    total2 = total + add;
    console.log(total2);
    $('#total').html(total2);
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="timeslot" class="form-control form-control-lg">
    <option disabled selected>Select Time</option>
    <option value="1">Dagtid (08 - 15) 0kr</option>
    <option value="2">Formiddag (12 - 15) 39kr</option>
    <option value="3">Ettermiddag (16 - 18) 39kr</option>
    <option value="4">Kveld (19 - 24) 129kr</option>
  </select>
<br>
<div id="total">100</div>

Upvotes: 1

Related Questions