I m developing my own supermarket website, i have working live calcuation script took from webiste, if applied in my popup page to do live calculation eg: 1kg rice($200) x 2 quantity = 400$. this concept applied in this page, its not working. please send help me on this. basically i need live calcuating based on quanty and kg selection .
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript">
$('#size').change(function() {
updateValues();
});
$('#qty').keyup(function() {
updateValues();
});
function updateValues(){
// Remove any previously set values
$('#show_box, #total_box').empty();
var qty = document.getElementById("qty").value;
var price = 0;
var rate = 0;
$('#size').find('option:selected').each(function() {
// Check that the attribute exist, so that any unset values won't bother
if ($(this).attr('data-price')) {
price = $(this).data('price');
rate = price*qty;
$('#show_box').append('<h6>' + rate + '</h6>');
}
});
$('#total_box').text(rate);
} </script><!--==================================
Quick view modal window
======================================-->
<div id="quick_view" class="modal_window">
<button class="close arcticmodal-close"></button>
<div class="clearfix">
<!-- - - - - - - - - - - - - - Product image column - - - - - - - - - - - - - - - - -->
<div class="single_product">
<!-- - - - - - - - - - - - - - Image preview container - - - - - - - - - - - - - - - - -->
<div class="image_preview_container" id="qv_preview">
<img id="img_zoom" data-zoom-image="images/qv_large_1.JPG" src="images/qv_img_1.jpg" alt="">
</div><!--/ .image_preview_container-->
<!-- - - - - - - - - - - - - - End of image preview container - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Prodcut thumbs carousel - - - - - - - - - - - - - - - - -->
<div class="product_preview" data-output="#qv_preview">
<div class="owl_carousel" id="thumbnails">
<img src="images/qv_thumb_1.jpg" data-large-image="images/qv_img_1.jpg" alt="">
<img src="images/qv_thumb_2.jpg" data-large-image="images/qv_img_2.jpg" alt="">
<img src="images/qv_thumb_3.jpg" data-large-image="images/qv_img_3.jpg" alt="">
<img src="images/qv_thumb_4.jpg" data-large-image="images/qv_img_4.jpg" alt="">
</div><!--/ .owl-carousel-->
</div><!--/ .product_preview-->
<!-- - - - - - - - - - - - - - End of prodcut thumbs carousel - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Share - - - - - - - - - - - - - - - - -->
<div class="v_centered">
<span class="title">Share this:</span>
<div class="addthis_widget_container">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- - - - - - - - - - - - - - End of share - - - - - - - - - - - - - - - - -->
</div>
<!-- - - - - - - - - - - - - - End of product image column - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Product description column - - - - - - - - - - - - - - - - -->
<div class="single_product_description">
<h3><a href="#">Ivory Body Wash, Original 24 fl oz</a></h3>
<div class="description_section v_centered">
<!-- - - - - - - - - - - - - - Product rating - - - - - - - - - - - - - - - - -->
<ul class="rating">
<li class="active"></li>
<li class="active"></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!-- - - - - - - - - - - - - - End of product rating - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Reviews menu - - - - - - - - - - - - - - - - -->
<ul class="topbar">
<li><a href="#">3 Review(s)</a></li>
<li><a href="#">Add Your Review</a></li>
</ul>
<!-- - - - - - - - - - - - - - End of reviews menu - - - - - - - - - - - - - - - - -->
</div>
<div class="description_section">
<table class="product_info">
<tbody>
<tr>
<td>Manufacturer: </td>
<td><a href="#">Chanel</a></td>
</tr>
<tr>
<td>Availability: </td>
<td><span class="in_stock">in stock</span> 20 item(s)</td>
</tr>
<tr>
<td>Product Code: </td>
<td>PS06</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="description_section">
<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna.</p>
</div>
<hr>
<p class="product_price"><s>$9.99</s> <b class="theme_color">$5.99</b></p>
<!-- - - - - - - - - - - - - - Product size - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
<span class="title">Size:</span>
<div class="custom_select min">
<select id="size" >
<option id="def" value="default" selected>select a course</option>
<option id="mth" data-price="100" value="1">1 kg</option>
<option id="eng" data-price="200" value="2">2 kg</option>
<option id="chm" data-price="300" value="3">3 kg</option>
<option id="phy" data-price="400" value="4">4 kg</option>
</select>
</div>
</div>
<!-- - - - - - - - - - - - - - End of product size - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Quantity - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
<span class="title">Qty:</span>
<div class="qty min clearfix">
<button class="theme_button" data-direction="minus">-</button>
<button class="theme_button" data-direction="minus">-</button>
<input type="text" value="2" id="qty">
<button class="theme_button" data-direction="plus">+</button>
</div>
<!-- - - - - - - - - - - - - - End of quantity - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Product actions - - - - - - - - - - - - - - - - -->
<div class="buttons_row">
<button class="button_blue middle_btn">Add to Cart</button>
<button class="button_dark_grey def_icon_btn middle_btn add_to_wishlist tooltip_container"><span class="tooltip top">Add to Wishlist</span></button>
<button class="button_dark_grey def_icon_btn middle_btn add_to_compare tooltip_container"><span class="tooltip top">Add to Compare</span></button>
</div>
<!-- - - - - - - - - - - - - - End of product actions - - - - - - - - - - - - - - - - -->
</div>
<!-- - - - - - - - - - - - - - End of product description column - - - - - - - - - - - - - - - - -->
</div>
</div>
<!--==================================
End quick view modal window
====================================== --></div>
Are you trying something like this
$('#size').change(function() {
updateValues();
});
$('#qty').keyup(function() {
updateValues();
});
function updateValues() {
var qty = $("#qty").val();
var price = 0;
var rate = 0;
$('#size').find('option:selected').each(function() {
if ($(this).attr('data-price')) {
price = $(this).data('price');
rate = price * qty;
} else {
rate = $(this).filter(":selected").val();
}
});
$('#dispamnt').text(rate);
}
$(".button").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$button.parent().find("input").val(newVal);
updateValues()
});.inc,
.dec,
.spinner-input {
float: left
}
.inc,
.dec {
width: 25px;
height: 25px;
border: solid 1px #666;
text-align: center;
cursor: pointer
}
.spinner-input {
width: 30px;
height: 25px;
border: solid 1px #666;
text-align: center;
border-right: 0;
border-left: 0
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="product_price"><s>$9.99</s> <b class="theme_color" id="dispamnt">$5.99</b>
</p>
<div class="description_section_2 v_centered"> <span class="title">Size:</span>
<div class="custom_select min">
<select id="size">
<option id="def" value="5.99" selected>select a course</option>
<option id="mth" data-price="100" value="1">1 kg</option>
<option id="eng" data-price="200" value="2">2 kg</option>
<option id="chm" data-price="300" value="3">3 kg</option>
<option id="phy" data-price="400" value="4">4 kg</option>
</select>
</div>
</div>
<div class="description_section_2 v_centered"> <span class="title">Qty:</span>
<div class="qty min clearfix">
<div class="spinner">
<div class="dec button">-</div>
<input id="qty" class="spinner-input" type="text" value="1" />
<div class="inc button">+</div>
</div>
</div>
</div></div>