Enchainement champs dynamiques

Version imprimable

31/08/2012, 12h53
Periah

Enchainement champs dynamiques

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.
31/08/2012, 15h13
v1cent

Pour donner le focus :

Code:

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 ?)
03/09/2012, 09h15
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.
03/09/2012, 11h59
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

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:

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:

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:

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 ;
}
 
...
?>

06/09/2012, 19h50
NoSmoking

Bonjour,

Citation:

(...)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.
07/09/2012, 14h05
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.
07/09/2012, 18h57
NoSmoking
dans ce cas retardes la mise du focus via un setTimeout
Code:

1 2 3 setTimeout( function(){ document.getElementById('eleve').focus(); }, 100);
11/09/2012, 16h20
Periah

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

Merci.
11/09/2012, 16h31
Bovino

Il faut surtout placer

Code:

activeColonne(colonne) ;

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