Control whether or not to change the value of an input

Question

Control whether or not to change the value of an input

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

0

I have this and it works for me, I skip the alert

        $("#TextField").change(function(){
            alert("El campo ha cambiado");
        });

But now I try to make the alert jump depending on the value if it changes or not

I've tried this and nothing

        var item = document.getElementById("Picker").value

        item.change(function(){
            alert("El campo ha cambiado");
        });

Also this other and nothing

        $("[id*=Picker]").val.change(function(){
            alert("El campo ha cambiado");
        });

The field is this

<INPUT name="Picker" id="Picker" type="hidden" value="AQUI">

javascript jquery

asked by Paolo Frigenti 28.09.2018 в 10:56

source

3 answers

SQL query to fix badly coded accents Show different rows in the same query

score 2 · Answer 1

To see if the value has changed, you must collect that value beforehand and compare it with the value when the field changes. The change function can not be applied to the value of the field.

Edited: added example for hidden field.

It is necessary to launch the change event when changing the value of the field, since when changing by programming the change event does not jump.

Original link

var inival = $("#texto").val();
$("#texto").change(function(){
  if ( $("#texto").val() != inival ) {
   alert("El campo ha cambiado");
  }
});

//campo oculto
var inivalh = $("#textoh").val();
$("#textoh").val("cambiado").triggerHandler('change'); //cambiando el valor
$("#textoh").on("change", function(){ 
    alert('campo oculto cambiado');
}).triggerHandler('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="texto" name="texto" value="inicio"/>

<input type="hidden" id="textoh" name="textoh" value="inicio"/>

score 1 · Answer 2

The simplest way to achieve what you want is to use bind() let's see in the example how to detect the change:

We hear the events keyup, keydown and change.

$("#main").bind("keyup keydown change", function(){

  $("h5").html("El valor ha cambiado a: "+$("#main").val());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="main" type="text" value="Default">

<h5>El valor ha cambiado a: Default</h5>

Review:

If you want to let the user know that nothing has changed, you could use focus() and in setTimeout() so that if the user does not change anything in the input, an alert message will appear after the specified time, something like :

$("#main").bind("keyup keydown change", function(){

  $("h5").html("El valor ha cambiado a: "+$("#main").val());
  
  // Cambio las clase defaulr a changed
  $("#main").addClass("changed");
  $("#main").removeClass("default")
  $("#temporal").remove(); //Me aseguro de eliminar el mensaje si algo cambia.

});

$("#main").focus(function(){

  $("body").append("<h5 id='temporal'>No has hecho ningun cambio.</h5>")
  $("#temporal").css({"visivility": "hidden", "opacity": "0"});
  
  // Solo ejecuto si el field aun contiene la clase default

  if ($("#main").hasClass("default")){
  
    setTimeout(function(){
  
    $("#temporal").css({"visivility": "visible", "opacity": "1"})
  
  },2000);
  setTimeout(function(){
  
    $("#temporal").remove();
  
  },4000);
  
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- introduzco una calse default para controlar si se ha cambiado o no -->
<input class="default" id="main" type="text" value="Default">

<h5>El valor ha cambiado a: Default</h5>

score 1 · Answer 3

Changes in the value of hidden items do not automatically trigger the .change() event. So, wherever you set that value, you should also tell jQuery to activate it.

$("#Boton").click(function() {
  $("#Picker").val("2").trigger('change');
});
$("#Picker").change(function() {
  alert("El campo ha cambiado");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Picker" type="hidden" value="1">
<input id="Boton" type="button" value="Cambiar">

Here is the answer in English:

link