I have a select dropdown for countries that supposed to change the values of checkboxes so it can be calculated on a Price summary before the user send it to us.
The issue that I have is that I am using 3 JavaScript codes for the select dropdown to do that 2 of them are working fine and they are:
Code to hide fields prices and show users based on the selected country
<script>
$(document).ready(function(){
$("select").on('change', function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".small").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".small").hide();
}
});
}).change();
});
</script>
Code to change the value to be calculated in the cost estimate form
<script>
$(document).ready(function() {
var price = {
"usa": {
"value1": 33.00,
"value2": 30.00,
"value3": 24.00
},
"uae": {
"value1": 33.00,
"value2": 30.00,
"value3": 24.00
},
"egypt": {
"value1": 177,
"value2": 310,
"value3": 420
}
};
function updatePrice() {
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
var val3 = +$(".value3").val();
var countryList = $("[name='countryList']").val();
var one = val1 * price[countryList].value1;
var two = val2 * price[countryList].value2;
var three = val3 * price[countryList].value3;
$("#price1").val(one);
$("#extraOption1").val(one);
}
$(".input").on("keyup", updatePrice);
$("[name='countryList']").on("change", updatePrice);
});
</script>
The above codes working fine but when i use the below code it work but it disabling the above 2 codes
// the code update the order summary on selecting the country
$('#countryList').on('change', function () {
showSelectedItemPrice('#countryList');
updateSummary();
saveState();
reValidateTotal();
});
I think the change events are disabling each others. please help me if there is a solution for it