Intenté todas las posibilidades pero no obtuve el resultado correcto. funciona bien para valores de dos dígitos, pero debería funcionar para cualquier valor dado. Aquí está mi código, por favor verifíquelo y sugiérame.

$(document).ready(function () {
			
			$("#height").keyup(function(){
				  var weight=$('#weight').val();
				  var height=$('#height').val();

				  if(weight>height){
					  alert("Height should be greater than Weight");
				  }
			});
});
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
  <label>WEIGHT(kg)</label><input type="text" id="weight"       
      name="weight" placeholder="weight"><br/><br/>
	<label>HEIGHT(cm)</label><input type="text" id="height"   
      name="height" placeholder="height">

</body>
</html>

Necesito mostrar una alerta cuando el peso es mayor que la altura.

2
Nagaraj Pujar 28 oct. 2017 a las 08:36

4 respuestas

La mejor respuesta

Parece que está comparando los valores de texto en lugar de los valores enteros.

Conviértalos a enteros antes de comparar y debería funcionar.

var weight=parseInt($('#weight').val());
var height=parseInt($('#height').val());

La comparación de cadenas funciona de manera diferente a la comparación de enteros, por ejemplo en JavaScript

"200" > "1999" // true
200 > 1999 // false
2
sid-m 28 oct. 2017 a las 06:32

Esto funcionará para usted.

He utilizado la función .blur para lograr este resultado. No se utiliza la función .keyup o .keydown porque afectará a todas las existencias clave del usuario, blur solo se activará en el foco desde la entrada.

$(document).ready(function() {

  $("#height").blur(function() {
    var weight = $('#weight').val();
    var height = $(this).val();

    if (weight > height) {
      alert("Height should be greater than Weight");
    }
  });
});
<!DOCTYPE html>
<html>

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

</head>

<body>
  <label>WEIGHT(kg)</label><input type="text" id="weight" name="weight" placeholder="weight"><br/><br/>
  <label>HEIGHT(cm)</label><input type="text" id="height" name="height" placeholder="height">

</body>

</html>
1
weBBer 28 oct. 2017 a las 05:48

Prueba esto:

$(document).ready(function(){
  $('#weight, #height').on('keyup', function(){
    var weight = $('#weight');
    var height = $('#height');
    
    if(weight.val().length > 0 && height.val().length > 0){
      if(weight.val() > height.val()){
        alert("Height should be greater than Weight");
      }
    }
  });
});
  <label>WEIGHT(kg)</label><input type="text" id="weight"       
      name="weight" placeholder="weight"><br/><br/>
	<label>HEIGHT(cm)</label><input type="text" id="height"   
      name="height" placeholder="height">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0
Jonjie 28 oct. 2017 a las 06:08
$(document).ready(function() {
  $("#height").blur(function() {
    compareHtWt();
  });
  $("#weight").blur(function() {
    compareHtWt();
  });
  function compareHtWt(){
    var weight = $('#weight').val();
    var height = $('#height').val();
    if (weight.length>0 && height.length>0 && weight > height) {
      alert("Height should be greater than Weight");
      return false;
    }
  }
});
<!DOCTYPE html>
<html>

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

<body>
  <label>WEIGHT(kg)</label>
  <input type="number" id="weight" name="weight" placeholder="weight"><br/><br/>
  <label>HEIGHT(cm)</label>
  <input type="number" id="height" name="height" placeholder="height">
</body>
</html>
1
Aditya Rao 28 oct. 2017 a las 06:19