conflict between onchange events

I have a select dropdown for countries that supposed to change the values of checkboxes … Read more conflict between onchange events

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

Source: JavaSript – Stack Overflow


Categories: NewsTags:

Tags:


Leave a Reply

Your email address will not be published. Required fields are marked *