Je teste donc simplement quelque chose avec js, fondamentalement le nombre dans la première entrée doit être plus grand que le nombre dans la deuxième entrée pour que le bouton de soumission soit activé.

Le bouton est désactivé correctement, mais si je change le numéro, il ne se réactivera pas

<!DOCTYPE HTML>
<html>
<body>
<input type='number' id='first' onchange="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;

if(first > second){
document.getElementById('sub').disabled=false;
}else{
document.getElementById('sub').disabled=true;   
}


}
</script>
<input type="submit" id="sub"/>
</body>
</html>

Modifier: les flèches du déclencheur de saisie de nombre lors du changement semblent avoir causé le problème

6
deemel 12 nov. 2011 à 17:49

3 réponses

Meilleure réponse

Vous devez ajouter les événements onclick et onkeyup afin de répondre aux interactions de la souris et aux insertions du presse-papiers:

http://jsfiddle.net/wzvvN/1

<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
5
ComFreek 12 nov. 2011 à 14:38

Vous pouvez utiliser onkeyup(), car onchange() n'est appelé que lorsque vous basculez le focus sur un autre élément.

De plus, votre fonction compare actuellement des chaînes. Utilisez parseInt pour convertir en entier, puis comparez. Le code suivant fonctionne pour moi:

<html>
<body>
<input type='number' id='first' onkeyup="validateNumber()"/><br>
<input type='number' id='second' onkeyup="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
  var first = parseInt(document.getElementById('first').value, 10);
  var second = parseInt(document.getElementById('second').value, 10);

  if(first > second){
    document.getElementById('sub').disabled=false;
  } else {
    document.getElementById('sub').disabled=true;   
  }
}
</script>
<input type="submit" id="sub" disabled="disabled" />
</body>
</html>
3
AbdullahC 12 nov. 2011 à 14:06

Essayez de lier les événements onfocus et onblur à.

<input type='number' id='first' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
3
Martin Borthiry 12 nov. 2011 à 13:59