An Alert appears for each detected keyup

Question

An Alert appears for each detected keyup

Navigation

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

0

I would like to know how I do to avoid generating an alert for each value entered in an input field with the keyup event, I only wish that the alert be executed once if the validation fails, but with this code if in the input I press x number of keys, that x number of times the alert appears.

thanks.

$(function(){

    $('#nu_useful_width_max').keyup(function(){
        setTimeout(function(){
                var min = parseFloat(document.getElementById('nu_useful_width_min').value);
                var max = parseFloat(document.getElementById('nu_useful_width_max').value);
                if(min>=max)
                    alert('El ancho útil minimo no puede ser mayor al ancho útil maximo, por favor corregir');

        }, 1300);
        return false;

    });

});

javascript jquery

asked by Darwin Gomez 23.11.2017 в 06:23

source

3 answers

1

Here is the example I hope you help

$('#nu_useful_width_max').keyup(function(){
    if($(this).val()>$("#nu_useful_width_min").val()){
      alert('El ancho útil minimo no puede ser mayor al ancho útil maximo, por favor corregir');
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">ancho útil maximo</label>
  <input id="nu_useful_width_min" type="number" name="" value="">
  <label for="">ancho útil minimo</label>
  <input id="nu_useful_width_max" type="number" name="" value="">
  
  </div>

answered by 23.11.2017 в 07:28

0

window.addEventListener("DOMContentLoaded", applied);

function applied() {
  var input = {max: document.getElementById("max"),
               min: document.getElementById("min")};
  function _ini(focus) {
  var noFocus = focus === input.max ? input.min :
                input.max, needAlert = false;
  if(focus === input.max && focus.value < noFocus.value 
     && noFocus.value !== "") { 
     needAlert = true;
  }
  else if ( focus === input.min && focus.value > noFocus.value      && noFocus.value !== "") {
     needAlert = true;
  }
  if(needAlert) alert("Error en la asignación de los valores");
  }
  input.max.addEventListener("keyup", () => {
  _ini(input.max);
  });
  input.min.addEventListener("keyup", () => {
  _ini(input.min);
  });
}

Máximo: <input type="number" id="max">
Mínimo: <input type="number" id="min">

answered by 23.11.2017 в 17:58

Extract table data to another table automatically in MYSQL [closed] How to load content inside a DIV with Ajax and php?

score 2 · Accepted Answer

Apparently, what you want is that the alert does not appear at once but after 1.3 seconds that the user has finished entering the maximum value. In this case, the use of setTimeout is fine, but just as you have those timeOut, they will accumulate for each key.

What you should do is clear the timeout when a new key has been pressed, so that only the most recent one is executed, using clearTimeout . This, because setTimeout returns a handler that you can then use to cancel the pasted event:

(taking me from the html that put @LuisDanielRoviraContreras)

$(function(){
    var timeout;
    $('#nu_useful_width_max').keyup(function(){
        clearTimeout(timeout);
        timeout = setTimeout(function(){
          var min = parseFloat(document.getElementById('nu_useful_width_min').value);
          var max = parseFloat(document.getElementById('nu_useful_width_max').value);
          if( min>max ) {
            alert('El ancho útil minimo no puede ser mayor al ancho útil maximo, por favor corregir');
          }
        }, 1300);
        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <label for="">ancho útil minimo</label>
  <input id="nu_useful_width_min" type="number" name="" value="">
  <label for="">ancho útil maximo</label>
  <input id="nu_useful_width_max" type="number" name="" value="">
  </div>