11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Griser/dégriser un champs via JS

Bonjour,

J'ai mis en place un script permettant de griser/dégriser (théoriquement) des champs de mon formulaire.

Le script JS est actif pour 2 champs un de type "text" et l'autre de type "file". Ce que je souhaite c'est grisé le champs "file" si text est rempli et inversement.

Ma fonctionne marche parfaitement, cependant je n'arrive pas à dégriser Smiley decu .

En effet, si par exemple j'écris quelque chose dans le champs "text" le champs "file" se grise (normal). Pourtant si j'actualise (F5) ou j'efface ce que j'ai écris dans ce champs via la touche suppr de mon clavier, le champs "file" ne se dégrise pas Smiley decu

Pourriez vous m'aider ?

Voici mon script appelé par un onKeyUp: 

function griser_file(){
    // récupère l'input file
    var source = document.getElementById('actu_file');

     // si le texte est vide
    if(this.value == ''){
	// dégrise la case
        source.disabled = false;
    }
    else{
	// grise la case
        source.disabled = true;
    }
}


Merci d'avance Smiley smile
Modifié par Cocopop (23 Nov 2010 - 14:18)
Bonjour,

À ton avis, à quoi correspond le mot-clé this dans ta fonction?
D'après Firebug, il correspond à l'objet Window! Du coup, la valeur de this.value dans ton code est et sera toujours undefined. Première erreur.

Ensuite, tu fais une comparaison avec == au lieu de ===. En gros tu ne vérifies pas si ta valeur est égale à une chaine vide, mais tu demandes si elle est «plutôt fausse». Il s'avère que undefined est une des valeurs «plutôt fausses» en JavaScript (à l'instar d'une chaine vide, de zéro, etc.). La comparaison que tu fais donne (undefined == ''), ce qui est vrai. Deuxième erreur.

Pour corriger, il faut:
- passer l'élément qui appelle ta fonction en paramètre de la fonction:
<input type="text" onkeyup="toggleFile(this, 'actu_file');">

- utiliser ce paramètre dans ta fonction plutôt que this:
function toggleFile(source, targetId) {
  var target = document.getElementById(targetId);
  if (source.value === '') {target.disabled = true}
  else {target.disabled = false};
}

(Marche bien dans mon test mais je me suis limité à un seul navigateur.)

Pour améliorer encore la fonction, on doit pouvoir supprimer les espaces du début et de la fin de source.value avant de comparer. Du moins si tu veux que l'input file reste désactivé lorsque l'utilisateur a tapé uniquement un ou plusieurs espaces.

PS: à tout hasard, si tu n'as pas compris l'explication ci-dessus, pose des questions. Ce serait dommage de copier-coller un code qui marche mais que tu ne comprends pas. Smiley cligne
Modifié par Florent V. (20 Nov 2010 - 17:40)
Florent V. a écrit :
Bonjour,

À ton avis, à quoi correspond le mot-clé this dans ta fonction?
D'après Firebug, il correspond à l'objet Window! Du coup, la valeur de this.value dans ton code est et sera toujours undefined. Première erreur.

Ensuite, tu fais une comparaison avec == au lieu de ===. En gros tu ne vérifies pas si ta valeur est égale à une chaine vide, mais tu demandes si elle est «plutôt fausse». Il s'avère que undefined est une des valeurs «plutôt fausses» en JavaScript (à l'instar d'une chaine vide, de zéro, etc.). La comparaison que tu fais donne (undefined == ''), ce qui est vrai. Deuxième erreur.

Pour corriger, il faut:
- passer l'élément qui appelle ta fonction en paramètre de la fonction:
&lt;input type=&quot;text&quot; onkeyup=&quot;toggleFile(this, 'actu_file');&quot;&gt;

- utiliser ce paramètre dans ta fonction plutôt que this:
function toggleFile(source, targetId) {
  var target = document.getElementById(targetId);
  if (source.value === '') {target.disabled = true}
  else {target.disabled = false};
}

(Marche bien dans mon test mais je me suis limité à un seul navigateur.)

Pour améliorer encore la fonction, on doit pouvoir supprimer les espaces du début et de la fin de source.value avant de comparer. Du moins si tu veux que l'input file reste désactivé lorsque l'utilisateur a tapé uniquement un ou plusieurs espaces.

PS: à tout hasard, si tu n'as pas compris l'explication ci-dessus, pose des questions. Ce serait dommage de copier-coller un code qui marche mais que tu ne comprends pas. Smiley cligne


Merci de ta réponse précise et surtout compréhensive car le Javascript est un langage assez strict je trouve Smiley biggol

Je comprends parfaitement ton code mais c'est vrai que je n'ai pas pensé à faire une fonction si évolué car je pense que je n'ai pas assez de maitrise pour l'instant du JS (je compte y remédier Smiley lol ).

Encore merci de ton aide, qui va m'éviter de longue nuit dans mon bouquin ou sur google Smiley smile
Sujet clos
Aller à