1

How do I write an if statement so that it applies only when Value A changes to Value B in a select box? https://jsfiddle.net/mademoiselletse/gv0ohdzv/1/

I have the following select box for "miles" and input box for "residual":

<div class="item_div"><label>Miles:</label>
    <select id="miles">
        <option value="10000">10,000</option>
        <option value="12000" selected>12,000</option>
        <option value="15000">15,000</option>
    </select>
</div>
<div class="item_div">
    <label>Residual: </label>
    <input type="number" id="resP" class="rmVal" value="52"> % 

</div>
<div>
    <label>Result (10000*Residual)</label>
    <input id = "result"></input>

</div>

I would like to add 1 to the miles <input> value if the user changes from 12000 to 10000. If the user changes from 10000 to 15000, I would like to subtract 3. If the user then changes from 15000 to 120000, I would like to +1 and so on.

The residual values for corresponding miles are:
10000 miles: 53%
12000 miles: 52%
15000 miles: 50%

The reason I wanted to make the residual change based on the miles change is that later on, I want the user to be able to manually change the residual value and adjust the residual value based on the miles.

I tried to following code to +1 when the $("#miles") changes from 12000 to 10000 and -2 if it changes from 12000 to 15000 (line 13-26):

if (miles.val() == "12000") {
    miles.change(function() {
        if (miles.val() == "10000") {
            resN = resN +.01;
            resP.val(parseFloat(resP.val())+1);
            calculate();
        }
        else if (miles.val() == "15000") {
            resN = resN -.02;
            resP.val(parseFloat(resP.val())-2);
            calculate();
        }
    })
};

I repeated the if statement for the other miles changes (line 27-55). However, the code only works correctly for the 1st and 2nd miles change. The 3rd time on is messed up. I was wondering how I may correct my code and whether there is an easier way to accomplish this. Thank you very much! I much appreciate it!

Vic
  • 457
  • 1
  • 6
  • 12

3 Answers3

1

Store the previous value in a variable.

var cur_miles; // set default value of drop down

function milesChange (){
    switch(cur_miles){
        case "10000":
            switch(miles.val()){
                case "20000":
                // Do 10000 was changed to 20000 code
                break;
                case "30000":
                // Do 10000 was changed to 30000 code
                break;
            }
            break;
        case "20000":
            //...changed from 20000
            break;
        default:
            //...first time changed
            break;
    }
    // set cur_miles to current value
    cur_miles = miles.val();
}
Shanimal
  • 10,987
  • 7
  • 58
  • 71
  • Thank you for introducing the `switch()` function to me @Shanimal! I am having trouble implementing your suggested change, however. Not sure what I did wrong? https://jsfiddle.net/mademoiselletse/gv0ohdzv/3/ – Vic Oct 28 '15 at 23:08
  • add the other cases to the switch and set the initial value of `cur_miles` to a string... e.g. `cur_miles = "12000"` https://jsfiddle.net/gv0ohdzv/6/ – Shanimal Oct 28 '15 at 23:29
  • 1
    Works perfectly! Thank you! – Vic Oct 28 '15 at 23:34
1

You can't register events based on the current value of the control. What you really need is a single change function that can track both the previous value and the value it has changed to. Using an example from here:

Getting value of select (dropdown) before change

You could accomplish it with something like this:

//set the pre data, usually needed after you initialize the select element
$('#miles').data('pre', $('#miles').val());

$('#miles').change(function(e) {
  var oldMiles = $(this).data('pre'); //get the pre data
  var newMiles = $(this).val();
  //Do your work here
  switch(oldMiles) {
     case "12000":
     if newMiles == "15000" {
      ...
  }

  $(this).data('pre', newMiles); //update the pre data
})
Community
  • 1
  • 1
Dan A.
  • 2,885
  • 16
  • 22
  • Thank you for the suggestion on data storing function. While I understand it conceptually, I am struggling to implement it. What mistake did I make here? https://jsfiddle.net/mademoiselletse/gv0ohdzv/2/ Thank you! – Vic Oct 28 '15 at 22:42
  • https://jsfiddle.net/gv0ohdzv/8/ You were trying to reference $(this) when not in a function when setting the data. I changed it to "miles". – Dan A. Oct 29 '15 at 15:25
  • I've also updated my answer; I believe it was incorrect as well. – Dan A. Oct 29 '15 at 15:29
0

First you need to keep previous value in one js variable.

If you can use jQuery, following code will do what you want:

var prev_value = false;
$('#miles').on('change', function(){
    var new_value = $(this).val();
    if (prev_value ==== false) {
        prev_value = new_value;
        return; // Because this is just first time loading
    }
    if((prev_value =='10000') && (new_value =='12000')) {
        // do something
    } else if (...) {
       ...
    }
});
Samuel
  • 21
  • 6