Discussion :

[Periah]

Bonjour à tous,

Je suis nouveau sur le forum et je viens vers vous parce que, pour une fois, google n'a pas réussi à me répondre.

Je vous explique mon problème :

J'ai un formulaire avec un série de champs de saisie (champs texte et listes déroulantes) et je souhaiterais que ces champs se remplissent dynamiquement en fonction de la saisie des champs précédents (ça, ça marche) mais aussi que les champs soient désactivés tant que le champ précédent n'a pas été saisi (ça, ça marche aussi). A la saisi d'un champ, le suivant devient actif et prend le focus (et là, ça ne marche plus, impossible de donner le focus au champ qui vient d'être activé).

Exemple :

Etat initial :
champ 1 (texte) : actif (avec focus)
champ 2 (liste) : inactif
champ 3 (texte) : inactif

Remplissage du champ 1 et tabulation pour valider la saisie :
champ 1 (texte) : actif
champ 2 (liste) : actif (avec focus) --> problème...
champ 3 (texte) : inactif

Sélection du champ 2 :
champ 1 (texte) : actif
champ 2 (liste) : actif (avec focus)
champ 3 (texte) : actif

Validation du champ 2 :
champ 1 (texte) : actif
champ 2 (liste) : actif
champ 3 (texte) : actif (avec focus)

Quelqu'un aurait une solution pour faire ça?

Merci d'avance.

[v1cent]

Pour donner le focus :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('tonid').focus();

tu veux que ce soit fait quand ? il faut lancer une fonction avec ça pour le bon événement (onblur par exemple ?)

[Periah]

Chaque champ est disabled tant que le champ précédent n'a pas été renseigné.

Chaque champ étant dépendant du champ précédent pour son contenu, ils sont remplis par XMLHttpRequest..

Je souhaite que le champ qui vient d'être rempli par XMLHttpRequest soit activé (ça, c'est OK) et qu'il prenne le focus (ça c'est KO).

Le problème, c'est que l'ordre de prise de focus se fait avant que le champ soit enabled... Que je le mette à priori sur n'importe quel évènement du champ de départ.

En gros :
Validation du champ 1 -> lancement du XMLHttpRequest -> sortie du champ 1 -> exécution du XMLHttpRequest.

Le passage en enabled se fait donc à la fin de mon traitement et donc après l'ordre de prise de focus.

[v1cent]

si je comprend bien, pour reprendre ta séquence

Validation du champ 1 -> lancement du XMLHttpRequest -> sortie du champ 1 --> exécution du XMLHttpRequest -> sélection et remplissage du champ 2 avec les données reçues

Si ça doit bien faire ça, tu as juste à rajouter la fonction focus() après avoir réactivé ton élément

si c'est ce que tu essaie déjà de faire, il nous faudra du code pour t'aider

[Periah]

Me revoilà après plusieurs jours d'essai... Toujours pas plus de résultat même en essayant de coller le focus() un peu partout.

Voici des extraits de mon code, ce que je souhaite obtenir c'est que lorsque l'utilisateur valide sa saisie du champ "classe" (par exemple en appuyant sur la touche tabulation), ça rende le champ "eleve" enabled et que ça mette le focus sur ce champ "eleve"...

Index.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<TD>
	<div id="4">
		<input type="text" id="classe" name = "classe" disabled="disabled" onkeypress="return valideSaisie(event, 'numeric', this.name, 1) ; " onchange="updateIdentifiantEnfant(4) ;" size="3" name="classe" value="<?php decoupe_identifiant ('classe') ; ?>"> -->
	</div>
</TD>
<TD>
	<div id="5">
		<input type="text" id="eleve" name = "eleve" disabled="disabled" size="3" value="">
	</div>
</TD>

Javas.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function showUser(str, colonne)
{
	if (str!="")
	{
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				document.getElementById(colonne+1).innerHTML=xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax.php?q="+str +"&col=" + colonne + "&random=" + Math.random(), true);
		xmlhttp.send();
 
		activeColonne(colonne) ; 
	}
}

Ajax.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$q=$_GET["q"];
$col=$_GET["col"];
 
...
 
if ($col==3)
{
	echo "<input type='text' id='classe' name ='classe' onkeypress='return valideSaisie(event, \"numeric\", this.name, 1) ; ' onchange='showUser(this.value, ". ($col+1) .") ; updateIdentifiantEnfant(4) ; return false ;' size='3' value=''>" ;
	return true ;
}
 
if ($col==4)
{
	echo "<input type='text' id='eleve' name ='eleve' onkeypress='return valideSaisie(event, \"numeric\", this.name, 2) ; ' onchange='updateIdentifiantEnfant(5) ;' size='3' value=''>" ;
	return true ;
}
 
...
?>

[NoSmoking]

Bonjour,

(...)ce que je souhaite obtenir c'est que lorsque l'utilisateur valide sa saisie du champ "classe" (par exemple en appuyant sur la touche tabulation), ça rende le champ "eleve" enabled et que ça mette le focus sur ce champ "eleve"...

tu n'a pas d'autre alternative que de gérer cela via javascript en écrivant une gestionnaire personnalisé.

Au passage un élément disabled ne peut recevoir le focus et encore moins donner suite à un événement clavier.

[Periah]

Je sais bien qu'un élément disabled ne peut pas prendre le focus. Et c'est bien le souci, l'élément auquel je veux donner le focus est encore disabled alors qu'il aurait du passer à enabled.

Au départ dans l'exemple que j'ai donné, l'élément 'classe' est enabled et l'élément 'eleve' est disabled. Sur le onchange de 'classe', je lance la fonction showUser qui va appeler l'ajax qui va rendre l'élément 'eleve' enabled. Ca, ça fonctionne.

Ce que je cherche maintenant c'est qu'une fois que l'élément 'eleve' est devenu enabled, il prenne le focus mais ça, je n'y arrive pas.

Si je donne le focus sur le onchange de 'classe', ça se déclenche alors que 'eleve' n'est pas encore enabled. Si je le lance dans showUser, j'ai le même problème.

Par contre, si avant juste avant de donner le focus, je mets un message d'alerte, là ça se passe bien.

[NoSmoking]

dans ce cas retardes la mise du focus via un setTimeout

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
setTimeout( function(){
  document.getElementById('eleve').focus();
}, 100);

[Periah]

En mettant un setTimeout sur le onblur des champs, ça marche.

Merci.

[Bovino]

Il faut surtout placer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

activeColonne(colonne) ;

dans le callback de la requête AJAX...