Disabled et focus() sur IE

Eléphant du PHP | 445 Messages

20 nov. 2007, 03:17

Bonjour à tous.

Voila sur une page de monte site j'ai 2 champs text (ligue et joueur) - (chacun est selectionné en fonction de radio button place en face de ces champs)
Le radio button a gauche de ligue desactive le champs joueur (et active le champ ligue) et donne le focus a ligue
Et vive versa.

http://cartoressource.free.fr/index.php?cat=3

Le soucis est que sur IE apres avoir disabled=false un champ, celui ci ne prends pas le focus() alors qu'il fontionne impec sous firefox.

J'aimerais trouver un moyen de donner le focus a un champ apres l'avoir disabled=true puis disabled=false.

Merci d'avance.

Le code :
<script type="text/javascript">
<!--

function disable(num)
{
var ligue  = document.getElementById("ligue" ) ;
var joueur = document.getElementById("joueur") ;

   if(num==1)
   {
   ligue.disabled  = true ;
   joueur.disabled = false ;
   joueur.focus();
   }
   
   if(num==2)
   {
   ligue.disabled  = false ;
   joueur.disabled = true ;
   ligue.focus();
   }
}
//-->
</script>

<!-- Puis le code HTML

<input type="radio" value="1" name="choix" onchange="disable(2);" />
<input type="text" id="ligue" name="ligue" size="20" value="" />

<input type="radio" value="2" name="choix" onchange="disable(1);"  />
<input type="text" id="joueur" name="joueur" size="20" value="" />

Mammouth du PHP | 19672 Messages

20 nov. 2007, 07:21

Utilise des identifiants au lieu des names.

Ajoute un attribut id dans ta balise <form> si ce n'est pas déjà fait et double le name des input par un id avec la même valeur,
Ensuite, au lieu de document.getElementById pour pointer sur un champ, utilise plutôt :
var ligue = document.forms['id_du_formulaire'].elements['ligue'];
Et là ça devrait fonctionner sur tous les navigateurs.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 445 Messages

20 nov. 2007, 09:50

Bon alors le test avec document.forms a la place et resultat identique.
<script type="text/javascript">
<!--
function disable(num)
{
   if(num==1)
   {
   document.forms['form1'].elements['ligue'].disabled  = true ;
   document.forms['form1'].elements['joueur'].disabled = false ;
   document.forms['form1'].elements['joueur'].focus();
   }
   
   if(num==2)
   {
   document.forms['form1'].elements['joueur'].disabled = true ;
   document.forms['form1'].elements['ligue'].disabled  = false ;
   document.forms['form1'].elements['ligue'].focus();
   }
}
//-->
</script>

<!-- CODE HTML

<form method="post" action="./index.php?cat=3" name="form1" id="form1">

<input type="radio" value="1" name="choix" onchange="disable(2);"  />
<input type="text" id="ligue" name="ligue" size="20" value="" />

<input type="radio" value="2" name="choix" onchange="disable(1);"  />
<input type="text" id="joueur" name="joueur" size="20" value="" />

</form>
Et comme avant, apres avoir choisi un radio button le champ correspondant ne prends pas le focus tout seul.
Je suis obligé de cliquer sur ce champs pour avoir le focus.

Meme en simplifiant le code et en enlevant les document.forms['form1'].elements['xxxx'].disabled = true|false ;

Mammouth du PHP | 19672 Messages

20 nov. 2007, 09:56

J'avais pas vu un détail, remplace onchange par onclick :
Et simplifie un peu ton code ;)
<script type="text/javascript">
<!--
function disable(num)
{
    var formulaire = document.forms['form1'];
    var ligue      = formulaire.elements['ligue'];
    var joueur     = formulaire.elements['joueur'];
     if(num==1)
     {
         ligue.disabled  = true ;
         joueur.disabled = false ;
         joueur.focus();
     }
   
     if(num==2)
     {
         joueur.disabled = true ;
         ligue.disabled  = false ;
         ligue.focus();
     }
}
//-->
</script>

<!-- CODE HTML -->

<form method="post" action="./index.php?cat=3" name="form1" id="form1">
  <input type="radio" value="1" name="choix" onclick="disable(2);"  />
  <input type="text" id="ligue" name="ligue" size="20" value="" />
  <input type="radio" value="2" name="choix" onclick="disable(1);"  />
  <input type="text" id="joueur" name="joueur" size="20" value="" />
</form>
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 445 Messages

20 nov. 2007, 10:12

Wow incroyable.

En remplacent le onchange par un onclick cela resoud le problème.
Pourtant avec le onchange, le code s'executait (du moins rien que pour la partie disabled).

Merci à vous 2.

EDIT : D'apres la DOM onchange est bien fait pour les <input>
onchange : Au cas où un élément a reçu une valeur modifiée -> Ce qui etait mon cas.

Si tout les navigateurs respectaient les standards, je suis sur qu'il y aurait bien moins de guerre. :lol:

Mammouth du PHP | 19672 Messages

20 nov. 2007, 10:27

Sauf que selon le navigateur, le onchange ne s'exécutera qu'après la perte du focus sur le champ en question : or en cliquant sur un bouton radio, le focus reste dedans, donc le onchange n'est pas activé. Et pour un bouton radio, le contenu change simplement en cliquant dessus, donc onclick est plus approprié :)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe: