Compare value of two fields with jquery

Question

I have a problem comparing values of two fields input. I want an action to happen if the value being inserted is less than the value of the input occult.

Imagine that the value of the previous one has to be lower than the value of the field I’m entering at the moment, and the value of the previous one is 8594. If you insert 85939 it considers this value lower than the previous.

Look at the code:

<div class="form-group">

<label for="formGroupExampleInput2">Contador  Atual</label>
<br />
Valor Anterior: <span class="anterior">8594</span>
<input type="hidden" class="vant" value="8594">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Introduzir Valor Do Contador">

$('input[type="text"]').blur(function() {

    var campoV = $(this).parent().find('.anterior');
    var thisvalue = $(this).val();
    var anteriorValue = $(this).parent().find('.vant').val();

    if(thisvalue < anteriorValue) {
        campoV.css("color", "red");
    } else{
        campoV.css("color", "black");
        //insere valor na base de dados!!
    }    

});

Answer 1

The problem is that your comparison is being made as if the value is a "string". In this case "85939" is less than "8594", because the beginning "8594" is greater than "8593" and then comes "9".

To compare the numeral, you must convert to number, see the example:

// comparação como strings
console.log("85939" < "8594");

// aqui, comparando como números
console.log(Number("85939") < ("8594"));

Answer 2

You can do this way, I changed a few things, for example, there are two elements with equal id, there can be on a page two elements with the same id, and I changed the ids to be more suggestive.

Follow the code below commented.

$('#valor-contador').blur(function() {

  //Seleciona os elementos
  var elementoValorAnterior = $("#valor-anterior");
  var elementoValorContador = $("#valor-contador");
  var elementoValorAnteriorVisao = $("#valor-anterior-visao");

  //Converte os valores de string para inteiro
  var valorAnterior = parseInt(elementoValorAnterior.val());
  var valorContador = parseInt(elementoValorContador.val());
  
  //Verifica se o valor anterior e maior que o valor do contador
  if(valorAnterior > valorContador){
    elementoValorAnteriorVisao.css("color", "red");
  }else{
    elementoValorAnteriorVisao.css("color", "black");
    //insere valor na base de dados!!
  }
  
  //Caso queira atualizar os valores
  //elementoValorAnterior.val(valorContador);
  //elementoValorAnteriorVisao.text(valorContador);
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Contador  Atual</label>
  <br />
  Valor Anterior: 
  <span id="valor-anterior-visao">8594</span>
  <input id="valor-anterior" type="hidden" value="8594">
  <input id="valor-contador" type="text" class="form-control" placeholder="Introduzir Valor Do Contador">
</div>