Is there a way to reset the previous code from running after a user choose a new option from the sel-CodePudding

I have this script which checks the value of the select field and runs code depending on the condition. For example if the select value is equal to 1 then the code will input value into the input fields which a user cant change.

Jquery

$('#mon_reason').on('change click', function (e) {
  var reason = $('#mon_reason').val();
  if(reason == 1){
    $("#mon-worked").val(8.50);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(0.00);
    $("#mon-total").val(8.50);
  } if(reason == 2) {
    $("#mon-worked").val(0.00);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(8.50);
    $("#mon-total").val(8.50);
  } if(reason == 3) {
    $("#mon-worked").val(0.00);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(8.50);
    $("#mon-total").val(8.50);
  } if(reason == 4) {
    $("#mon-worked").val(4.25);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(4.25);
    $("#mon-total").val(8.50);
  }if(reason == 5) {
    $("#mon-worked").val(4.25);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(4.25);
    $("#mon-total").val(8.50);
   
  }if(reason == 6 || reason == 7) {
    $("#mon-worked").val();
    $("#mon-adjust").attr("readonly", false);
    $("#mon-adjust").val();
    $("#mon-total").val(8.50);
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val1 =  $("#mon-adjust").val();
            var val2 =  $("#mon-total").val();
            $("#mon-worked").val(val2-val1);
        });
  }if(reason == 8) {
    $("#mon-worked").val(8.50);
    $("#mon-adjust").attr("readonly", false);
    $("#mon-adjust").val();
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val3 =  $("#mon-worked").val();
            var val4 =  $("#mon-adjust").val();
            $("#mon-total").val(val3 val4);
        });
  }
  });
});

HTML

<select  id="mon_reason" name="">
<option disabled value="" selected="selected" >
        select an option ..
    </option>
    <option value="1" >
        working
    </option>
    <option value="2">
        Annual Leave Full Day - Paid
    </option>
    <option value="3">
        Annual Leave Full Day - Unpaid
    </option>
    <option value="4">
        Annual Leave Half Day - Paid
    </option>
    <option value="5">
        Annual Leave Half Day - Unpaid
    </option>
    <option value="6">
        Sick Leave
    </option>
    <option value="7">
        AWOL
    </option>
    <option value="8">
        Overtime
    </option>
</select>

<input readonly id="mon-worked" />
<input readonly id="mon-adjust" />
<input readonly id="mon-total" />

My issue:

if a user selects option sick leave(6) or AWOL(7) then the input fields "mon-adjust" and "mon-total" will subtract from one another to give us the value of "mon-worked".

if a user selects option overtime(8) then the input fields "mon-worked" and "mon-adjust" will be added together to give us the value of "mon-total".

The problem I am having is if a user chooses option sick leave(6) or AWOL(7) and then decides to choose overtime(8) the code

            var val1 =  $("#mon-adjust").val();
            var val2 =  $("#mon-total").val();
            $("#mon-worked").val(val2-val1);
        });

still runs and doesn't get cancelled after the user chooses a different option. The same happens if you choose overtime(8) first and then change to sick leave(6) or AWOL(7)

$("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val3 =  $("#mon-worked").val();
            var val4 =  $("#mon-adjust").val();
            $("#mon-total").val(val3 val4);
        });

this code will still run.

Is there any way to reset or remove the previous code from running after a user chooses a new option from the select dropdown if a condition has changed?

CodePudding user response：

You already have an onchange event. Just save a variable when that runs and check it's value the next time it runs to see what the user did before.

CodePudding user response：

$(document).ready(function(){
$('#mon_reason').on('change click', function (e) {
  var reason = $('#mon_reason').val();
  if(reason == 1){
    $("#mon-adjust").attr("disabled", true);
    $("#mon-adjust").val(0.00);
    $("#mon-total").val(8.50);
    $("#mon-worked").val(8.50);
  } if(reason == 2 || reason == 3 ) {
    $("#mon-adjust").attr("disabled", true);
        $("#mon-adjust").val(8.50);
        $("#mon-total").val(8.50);
        $("#mon-worked").val(0.00);
  } if(reason == 4 || reason == 5) {
    $("#mon-adjust").attr("disabled", true);
        $("#mon-adjust").val(4.25);
        $("#mon-total").val(8.50);
        $("#mon-worked").val(4.25);
   
  }if(reason == 6 || reason == 7) {
    $("#mon-worked").val();
    $("#mon-adjust").attr("disabled", false);
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val1 =  $("#mon-adjust").val();
            var val2 =  $("#mon-total").val();
            $("#mon-worked").val(val2-val1);
        });
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
        $("#mon-total").val(8.50);
    });

    $("#mon-adjust").val();

    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
    if ($('#mon-adjust').val() > 8.50 
        && e.keyCode !== 46
        && e.keyCode !== 8
       ) {
       e.preventDefault();    
       $('#mon-adjust').val(8.50);
    }
    });
   
    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
            if ($(this).val() < 0.00 
                && e.keyCode !== 46
                && e.keyCode !== 8
            ) {
            e.preventDefault();    
            $(this).val(0.00);
    }
    });
  }if(reason == 8) {
    $("#mon-adjust").attr("disabled", false);
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val3 =  $("#mon-worked").val();
            var val4 =  $("#mon-adjust").val();
            $("#mon-total").val(val3 val4);
        });
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
        $("#mon-worked").val(8.50);
    });

    $("#mon-adjust").val();

    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
    if ($('#mon-adjust').val() > 8.50  
        && e.keyCode !== 46
        && e.keyCode !== 8
       ) {
       e.preventDefault();    
       $('#mon-adjust').val(8.50);
    }
    });
   
    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
            if ($('#mon-adjust').val() < 0.00 
                && e.keyCode !== 46
                && e.keyCode !== 8
            ) {
            e.preventDefault();    
            $('#mon-adjust').val(0.00);
    }
    });
  }
  });
});

I have rewritten the script so now when a user selects a different option the previous rewritten code is undone by being more explicit in the new code which is executed. Some additions in the below code also limits the min and max of the input fields.

In summary, the issue was that code was being executed when a certain condition was being met but not being undone because I was not being explicit enough when conditions changed.