11485 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Bouton disabled si input vide

Bonjour,

Je me permets de poster ce message car je rencontre une petite difficulté.
J'ai un input et un bouton.
J'aimerais que :
- lorsque l'input est vide, le bouton est disabled
- lorsque l'input est rempli, le bouton est actif

Mon code ne fonctionne pas.


<input placeholder="Enter some text" name="name" id='input'/>
<button id='button'>Button</button>




let inputElt = document.getElementById('input');
let btn = document.getElementById('button');

if(inputElt.value !== ''){
			btn.disabled = false;
		}
		else {
			btn.disabled = true;
		}


Le CodePen est ici.

Comment serait-il possible d'utiliser un évènement pour parvenir au résultat souhaité.
Je bloque.

Merci de votre aide.
// JS
let inputElt = document.getElementById('input');
let btn = document.getElementById('button');
// on commence par desactiver le bouton quand le javascript se charge
btn.disabled = true;

// ajout d'une fonction appelee des qu'une touche est enfoncee
function isCharSet() {
  // on verifie si le champ n'est pas vide alors on desactive le bouton sinon on l'active
  if (inputElt.value != "") {
    btn.disabled = false;
  } else {
    btn.disabled = true;
  }  
}


// HTML
<input placeholder="Enter some text" name="name" id='input' onkeyup='javascript:isCharSet()' />
<button id='button'>Button</button>


Tu faisais l'action qu'une fois, de vérifier la valeur de ton champ. Quand tu saisissais quelque chose, il n'y avait pas d'appel de fonction à chaque touche.
Tu as aussi l'événement oninput si jamais ton cas d'usage prévoit que l'utilisateur double-clique dans le champ texte si jamais il veut sélectionner une valeur déjà saisie (cas d'erreur par exemple)

Bien à toi,
Cdt
Modifié par lmg (13 Aug 2019 - 12:51)
Meilleure solution
Bonjour,

Merci de ta réponse claire Smiley smile
Ta solution permet d'obtenir le résultat souhaité.

Dans le code HTML, on ajoute, à l'input 
onkeyup='javascript:isCharSet()'


Existe-t-il un moyen d'enlever l'appel de la fonction isCharSet (qui se fait dans le HTML) et de tout gérer dans le fichier JS ?

Est-il plutôt possible d'utiliser addEventListener sur l'input ?

Merci Smiley smile
Sujet clos
Aller à