CODEWITHSUNDEEP
javascriptjqueryinputonchangedetection
Dominique Deschatre
Dominique Deschatre

Reputation: 119

jQuery check if input value increases/decreases on change

I have an input type number

<input type="number" value="5" id="nmovimentos"/>

I want to do an especific action when the value increases or decreases (alert for a simpler example).

I have the following jQuery code:

$(document).ready(function(){
    var oldValue = $("#nmovimentos").val();
  $("#nmovimentos").change(function(){
    var newValue = $(this).val();
    if (newValue > oldValue)
        alert("increase!");
     else
         alert("decrease!");
  });
});

But it doesn't work because it can't detect the oldValue var.. so any clues on how to do that? Thank you very much!

Jsfiddle

Upvotes: 3

Views: 5903

Answers (3)

dfsq
dfsq

Reputation: 193271

You can make use of some property every HTMLInputElement has to store previous value, for example defaultValue. In this case you save couple of lines of code, and make code a little cleaner and concise:

$("#nmovimentos").change(function () {
    var direction = this.defaultValue < this.value
    this.defaultValue = this.value;
    if (direction) alert("increase!");
    else alert("decrease!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="5" id="nmovimentos" />

Upvotes: 6

AmmarCSE
AmmarCSE

Reputation: 30557

Update the oldValue in the handler 

$(document).ready(function() {
 var oldValue = $("#nmovimentos").val();
  $("#nmovimentos").change(function() {
    var newValue = $(this).val();
    if (newValue > oldValue)
      console.log("increase!");
    else
      console.log("decrease!");

    oldValue = newValue;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="number" value="5" id="nmovimentos" />

Or, use a data-* attribute to keep track

$(document).ready(function() {
  $("#nmovimentos").attr('data-prev-val', $("#nmovimentos").val());
  $("#nmovimentos").change(function() {
    var newValue = $(this).val();
    if (newValue > $(this).attr('data-prev-val'))
      console.log("increase!");
    else
      console.log("decrease!");

    $("#nmovimentos").attr('data-prev-val', newValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="number" value="5" id="nmovimentos" />

Upvotes: 3

Dave
Dave

Reputation: 10924

You are going to have to save the old value somewhere first. jQuery.data() is handy for this.

$(document).ready(function(){
  var nmovimentos = $("#nmovimentos");
  var oldValue = nmovimentos.val();
  nmovimentos.data("oldValue", oldValue);
  
  $("#nmovimentos").change(function(){
    var oldValue = $(this).data("oldValue");
    var newValue = $(this).val();
    if (newValue > oldValue)
        alert("increase!");
     else
         alert("decrease!");
    $(this).data("oldValue", newValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" value="5" id="nmovimentos"/>

Upvotes: 1

Related Questions