CODEWITHSUNDEEP
javascriptjqueryhtml
Matt
Matt

Reputation: 1177

Calculating price of multiple items

Currently I have a HTML form allows a person to select an item from a dropdown and it will put the price in an input and even change the price if the quantity is changed.

How can I make it so that when I add "multiple" inside the select tag (making it <select id="price_input" multiple>), it will calculate the price for the two or more items and if two or more are selected have the quantity dropdown disabled?

This is what I've been able to come up with but it doesn't have the additions described above that I am in need of:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $('#price_input').on('change', function() {
    $selection = $(this).find(':selected');
    $('#opt_price').val($selection.data('price'));
    $('#quantity_input').on('change', function() {
    $('#opt_price').val($selection.data('price') * $(this).val());
    });
  });
});
</script>

<select id="price_input">
  <option value="Coffee" data-price="3.00">Coffee</option>
  <option value="Chips" data-price="0.75">Chips</option>
  <option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
  <option value="1" >1</option>
  <option value="2" >2</option>
  <option value="3" >3</option>
</select>
<div>Option Price <input type="text" id="opt_price"/></div>

Upvotes: 1

Views: 2072

Answers (3)

rrk
rrk

Reputation: 15846

Using the following you can make it work for multiple products.

$(document).ready(function() {
  $('#price_input').on('change', function() {
    $('#opt_price').val(valueFUnction());
  });
  $('#quantity_input').on('change', function() {
    $('#opt_price').val(valueFUnction());
  });
});

function valueFUnction(quan) {
  var $selection = $('#price_input').find(':selected');
  var quantity = $('#quantity_input').val();
  var total = 0;
  $selection.each(function() {
    total += $(this).data('price') * quantity;
  })
  return total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="price_input" multiple>
  <option value="Coffee" data-price="3.00">Coffee</option>
  <option value="Chips" data-price="0.75">Chips</option>
  <option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div>Option Price
  <input type="text" id="opt_price" />
</div>

Upvotes: 2

RomanPerekhrest
RomanPerekhrest

Reputation: 92854

Try the following optimized version:

$('#price_input').on('change', function() {
    var items = $(this).val() || [], totalPrice = 0.00;
    $('#quantity_input').attr('disabled', items.length > 1);
    
    var selection = $(':selected', this);
    if (selection.length) {
        $.each(selection, function(i, v){
            totalPrice += parseFloat($(v).data('price'));
        });
    }    
    $('#opt_price').val(totalPrice);
});
  
$('#quantity_input').on('change', function() {
    $('#opt_price').val($('#price_input :selected').data('price') * $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="price_input" multiple>
  <option value="Coffee" data-price="3.00">Coffee</option>
  <option value="Chips" data-price="0.75">Chips</option>
  <option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
  <option value="1" >1</option>
  <option value="2" >2</option>
  <option value="3" >3</option>
</select>
<div>Option Price <input type="text" id="opt_price"/></div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can check if more then one option is selected with $(":selected", this).length > 1) and then change disabled of $('#quantity_input')

$('select').on('change', function() {
  if ($(":selected", this).length > 1) {
    $('#quantity_input').prop('disabled', true);
  } else {
    $('#quantity_input').prop('disabled', false)
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price_input" multiple>
  <option value="Coffee" data-price="3.00">Coffee</option>
  <option value="Chips" data-price="0.75">Chips</option>
  <option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div>Option Price
  <input type="text" id="opt_price" />
</div>

Upvotes: 1

Related Questions