I need to calculate data-price attribute rather than option value, I have created the code which works fine with value but my database has the different column which I don't want to change, the below example works fine with value but I want to know what changes should I make to get the value of data-price attribute
$('#CPU').on("change",function(){
var CPU = $("#CPU option:selected").attr('data-price');
$("#SelectedCPUResult").html(CPU);
});
// Update Product Tenure Price on select on product.php
$('#RAM').on("change",function(){
var RAM = $("#RAM option:selected").attr('data-price');
$("#SelectedRAMResult").html(RAM);
});
$(function () {
var fields = $('#form1 :input').change(calculate);
function calculate() {
var price = 0;
fields.each(function () {
price += +$(this).val();
})
$('#price').html(price.toFixed(2));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
<div>
<label for="CPU">CPU</label>
<select name="CPU" id="CPU">
<option value="">Select CPU</option>
<option value="9.99" data-price="9.99">1 Month</option>
<option value="19.99" data-price="19.99">3 Months</option>
<option value="29.99" data-price="29.99">6 Months</option>
<option value="39.99" data-price="39.99">12 Months</option>
<!-- Actual fields -->
<!-- <option value="1" data-price="9.99">1 Month</option> -->
<!-- <option value="3" data-price="9.99">3 Months</option> -->
<!-- <option value="6" data-price="9.99">6 Months</option> -->
<!-- <option value="12" data-price="9.99">12 MOnths</option> -->
</select>
<span id="SelectedCPUResult">9.99</span>
</div>
<div>
<label for="RAM">RAM</label>
<select name="RAM" id="RAM">
<option value="">Select RAM</option>
<option value="9.99" data-price="9.99">1 Month</option>
<option value="19.99" data-price="19.99">3 Months</option>
<option value="29.99" data-price="29.99">6 Months</option>
<option value="39.99" data-price="39.99">12 Months</option>
<!-- Actual fields -->
<!-- <option value="monthly" data-price="9.99">1 Month</option -->
<!-- <option value="quarterly" data-price="9.99">3 Months</option> -->
<!-- <option value="semianuually" data-price="9.99">6 Months</option> -->
<!-- <option value="annually" data-price="9.99">12 Months</option> -->
</select>
<span id="SelectedRAMResult">9.99</span>
</div>
</form>
<hr>
Price: <u id="price">19.98</u>
Your help in this regards would be highly appreciated.
just change that:
function calculate() {
var price = 0;
fields.each(function () {
price += parseFloat($(this).attr('data-price'));
})
$('#price').html(price.toFixed(2));
}
You were using ".val()" (which gets the value) and I changed it to ".attr('data-price')" (wich looks for a attribute with the "data-price" name) and convert it to a float.
$('#CPU').on("change",function(){
var CPU = $("#CPU option:selected").attr('data-price');
$("#SelectedCPUResult").html(CPU);
});
// Update Product Tenure Price on select on product.php
$('#RAM').on("change",function(){
var RAM = $("#RAM option:selected").attr('data-price');
$("#SelectedRAMResult").html(RAM);
});
$(function () {
//var fields = $('#form1 :input').change(calculate);
$('#form1 :input').change(calculate);
function calculate() {
var price = 0;
$('.partial').each(function (idx, el) {
price += parseFloat($(el).html());
})
$('#price').html(price.toFixed(2));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
<div>
<label for="CPU">CPU</label>
<select name="CPU" id="CPU">
<option value="">Select CPU</option>
<option value="1" data-price="9.99">1 Month</option>
<option value="3" data-price="19.99">3 Months</option>
<option value="6" data-price="29.99">6 Months</option>
<option value="12" data-price="39.99">12 MOnths</option>
</select>
<span class="partial" id="SelectedCPUResult">9.99</span>
</div>
<div>
<label for="RAM">RAM</label>
<select name="RAM" id="RAM">
<option value="">Select RAM</option>
<option value="monthly" data-price="9.99">1 Month</option>
<option value="quarterly" data-price="19.99">3 Months</option>
<option value="semianuually" data-price="29.99">6 Months</option>
<option value="annually" data-price="39.99">12 Months</option>
</select>
<span class="partial" id="SelectedRAMResult">9.99</span>
</div>
</form>
<hr>
Price: <u id="price">19.98</u>
Related
I have looked at multiple examples of js being used to auto calculate the total but haven't found any applicable for me which has fields calculating different numbers to be combined to create a total. Here is my code below so you can understand more.
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script language="javascript">
function Calc(className){
var elements = document.getElementsByClassName(className);
var totalCost = 0;
for(var i = 0; i < elements.length; i++){
totalCost += parseInt(elements[i].value);
}
document.tickets.totalCost.value = '£' + totalCost;
}
</script>
</head>
<body>
<form name="tickets" id="tickets">
<!--FIRST CLASS that takes the value entered and * by the ticket price for an adult. Price is £18 * Number of Tickets -->
<label for="noAdults"> Number of Adults</label>
<select name="noAdults" id="noAdults" class="adultTotal" onclick="Calc('adultTotal')">
<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>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>
<label for="pricing"> X £18</label><br><br>
<!--Not class as children under 2 are not charged-->
<label for="childUnder2"> Number of Children aged 2 or less </label>
<select name="childUnder2" id="childUnder2">
<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>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>https://stackoverflow.com/questions/ask?title=auto%20calculate%20values%20onclick#
<label for="pricing"> X £FREE</label><br><br>
<!--SECOND CLASS that takes the value entered and * by the ticket price for a child ages 3-10. Price is £10 * Number of Tickets -->
<label for="childBox1"> Number of Children aged 3-10</label>
<select name="childBox1" id="childBox1" class="childBox1" onclick="Calc('childBox1')">
<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>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>
<label for="pricing"> X £10</label><br><br>
<!--EDIT CLASS that takes the value entered and * by the ticket price for a child ages 11-16. Price is £13 * Number of Tickets -->
<label for="childBox2"> Number of Children aged 11-16</label>
<select name="childBox2" id="childBox2" class="childBox2" onclick="Calc('childBox2')">
<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>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>
<label for="pricing"> X £13</label><br><br>
<!--If checked, the priced is double from that of a single ticket. Total price is * 2. -->
<input type="checkbox" name="rtnJourney" id="rtnJourney" value="2" onclick="Calc('rtnJourney')">Return Journey - If unchecked, price is halved<br>
Total: <input type="text" id="totalCost" name="totalCost">
</form>
</body></html>
Now I understand why the above JS code doesn't work and I fetched this from one of the examples online which took every value from a CLASS and combined them but since I have different multiplication values for each entry I tried to modify it which didn't workout. I am not sure how to do what I need it to do to calculate the total. Also please note that it doesn't add the values yet, for now I just want to make it calculate the total from all the fields.
p.s I am really not familiar with JS and I really appreciate any help given.
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script language="javascript">
var map = {
"noAdults": {
value: 0,
multiplier: 18
},
"childUnder2": {
value: 0,
multiplier: 0
},
"childBox1": {
value: 0,
multiplier: 10
},
"childBox2": {
value: 0,
multiplier: 13
}
}
var rtnJourney = false;
function displayTotal() {
var total = 0;
for (var key in map) {
total += map[key].value * map[key].multiplier;
}
total = rtnJourney ? total * 2 : total;
document.tickets.totalCost.value = '£' + total;
}
function getTotal(dom) {
map[dom.id].value = dom.value;
displayTotal();
}
function getChecked(dom) {
rtnJourney = dom.checked;
displayTotal();
}
</script>
</head>
<body>
<form name="tickets" id="tickets">
<!--FIRST CLASS that takes the value entered and * by the ticket price for an adult. Price is £18 * Number of Tickets -->
<label for="noAdults"> Number of Adults</label>
<select name="noAdults" id="noAdults" class="adultTotal" onchange="getTotal(this)">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<label for="pricing"> X £18</label>
<br>
<br>
<!--Not class as children under 2 are not charged-->
<label for="childUnder2"> Number of Children aged 2 or less </label>
<select name="childUnder2" id="childUnder2" onchange="getTotal(this)">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>https://stackoverflow.com/questions/ask?title=auto%20calculate%20values%20onclick#
<label for="pricing"> X £FREE</label>
<br>
<br>
<!--SECOND CLASS that takes the value entered and * by the ticket price for a child ages 3-10. Price is £10 * Number of Tickets -->
<label for="childBox1"> Number of Children aged 3-10</label>
<select name="childBox1" id="childBox1" class="childBox1" onchange="getTotal(this)">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<label for="pricing"> X £10</label>
<br>
<br>
<!--EDIT CLASS that takes the value entered and * by the ticket price for a child ages 11-16. Price is £13 * Number of Tickets -->
<label for="childBox2"> Number of Children aged 11-16</label>
<select name="childBox2" id="childBox2" class="childBox2" onchange="getTotal(this)">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<label for="pricing"> X £13</label>
<br>
<br>
<!--If checked, the priced is double from that of a single ticket. Total price is * 2. -->
<input type="checkbox" name="rtnJourney" id="rtnJourney" value="2" onchange="getChecked(this)">Return Journey - If unchecked, price is halved
<br> Total:
<input type="text" id="totalCost" name="totalCost">
</form>
</body>
</html>
I have a script that shows total price for each option in dropdown menu. Now I need to show the name of selected menu with the total.
You will find the script below that shows the total price. I need it to show the name in the <option>.
Any idea how to modify this to show the name of each dropdown selected?
//<![CDATA[
$(function() {
$("#type").on("change", function() {
$("select.calculate option").eq(0).prop('selected', true);
calc();
});
$("select.calculate").on("change", calc);
$("input[type=checkbox].calculate").on("click", calc);
function calc() {
var basePrice = 0;
newPrice = basePrice;
$("select.calculate option:selected,input[type=checkbox].calculate:checked").each(function(idx, el) {
newPrice += parseInt($(el).data('price'), 10);
});
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type" name="buyer" class="form-control input-lg form-el">
<option value="">Service Needed</option>
<option value="kite">Car Wash & Detailing</option>
<option value="user">Mechanic visit</option>
<option value="elect">Electrican visit</option>
<option value="tyre">Tyre Service</option>
<option value="bat">Battery Service</option>
</select>
<div style='display:none; ' id='business'>
<select id="type2" name="buyername" class="form-control input-lg form-el calculate">
<option data-price="0" value="">-- Select --</option>
<option data-price="100" value="kite1">Car Wash exterior</option>
<option data-price="150" value="kite1">Car Wash In & Out</option>
<option data-price="1000" value="kite2">Full Detailing</option>
</select>
</div>
<div style='display:none; ' id='tyrem'>
<select id="type2" name="tyrem" class="form-control input-lg form-el calculate">
<option data-price="0" value="">-- Select --</option>
<option data-price="100" value="kite1">Road tyre problem rescue</option>
<option data-price="50" value="kite1">4 Tyre pressure check and adjust</option>
<option data-price="100" value="kite2">tyre 1 plug repair</option>
</select>
</div>
<div style='display:none; ' id='batm'>
<select id="type2" name="batm" class="form-control input-lg form-el calculate">
<option data-price="0" value="">-- Select --</option>
<option data-price="100" value="kite1">Battery rescue / jump start</option>
<option data-price="150" value="kite2">Battery check , jump start or replace - price depends on battery</option>
</select>
<span id="item-price">0</span>
</div>
I have three list in my form where having same option while loading the form.
But my requirement is : as soon as user selects the first option it should be removed from second list and as user gives second option it should be removed from third list. So there are no chances to have duplicate choice.
<html>
<head>
<script language="JavaScript">
function enable_text(status)
{
status=!status;
document.f1.other_text.disabled = status;
}
</script>
</head>
<body onload=enable_text(false);>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
Here's jQuery event change on select boxes, which will disable selected option in other selects but not in selected one.
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
And after that will restart options that are disabled but not selected.
--I've also seted value "Y" for yellow.
$(function(){
$('select').on('change', function(){
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
// restart options that are disabled, but not selected anymore.
var selectedElements = "";
$('select option:selected').each(function(k,v){
selectedElements += (selectedElements!=""?",":"")+ '[value="'+$(this).val()+'"]';
});
$('select option:disabled').not(selectedElements).prop('disabled', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/
No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!
I have a dynamic number of dropdown boxes with different values. I wan't to be able to calculate all of the totals from all of the boxes together.
Currently, I have a snippet that will calculate the total of one box, but when I select another box, it will show the total of that one instead. My program can have any amount of drop down boxes but it's random. Heres a snippet that calculates one box at a time
$('.drop').on('change',function() {
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
$("div.total-amount").text("$"+total);
});
My form rendered looks like this
<form accept-charset="UTF-8" action="/orders" id="payment-form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ia3sQyXOn0BP3GUDHmLmghjLFyK/27F8N9EEyhYN8UI=" /></div>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_2" value="2"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="2" />
another
<br>
<div class='subheader'>$5.55</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="555" id="another" name="order_products[][quanity]" prodindex="0"><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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_1" value="1"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName1' type='checkbox'>
<label for='switchName1'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="1" />
test
<br>
<div class='subheader'>$0.33</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="33" id="test" name="order_products[][quanity]" prodindex="1"><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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
Can a jQuery expert help me out here?
//cache your selectors
var drop = $('.drop');
//your grand total variable
var grandtotal = 0;
//create a function to call to reuse for all drops
function getTotal(){
//cycle through each one
drop.each(function(i,el){
//i is the number and el is the element (or this)
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
grandtotal = grandtotal + total;
});
$("div.total-amount").text("$"+grandtotal);
}
//bind on change to all drops
drop.on('change',getTotal);