Lier plusieurs formulaires

Version imprimable

04/08/2010, 10h01
dav2k

Lier plusieurs formulaires

Hello :coucou:.

Je me casse la tête depuis quelques jours à essayer de faire communiquer 2 formulaires entre-eux.

Explication :

J'ai un premier formulaire, dans lequel on trouve une liste déroulante vide avec un textarea qui y correspond (le textarea ne se contente que d'afficher chaque option de la liste déroulante qui elle même n'est là qu'à titre indicatif, les éléments du textarea sont séparés par une virgule).

Maintenant sur ce même formulaire j'ai un lien avec un bouton (+) qui permet de remplir cette liste déroulante.
En cliquant dessus on ouvre une popup qui contient un autre formulaire dont le contenu est le résultat d'un while PHP lu depuis une base de données.

Jusque là tout fonctionne nickel. Maintenant ce que j'aimerais c'est envoyer les données saisies depuis le 2ème formulaire (une ou plusieurs cases à cocher saisies) vers le premier pour remplir la première liste déroulante indicative.

J'ai déjà essayé avec la méthode GET simple mais je n'ai pas réussi à remplir cette liste déroulante sans avoir à rafraîchir la page et donc réinitialiser tous les champs du form... Sinon la méthode fonctionnait!

Maintenant je cherche une orientation en exploitant XHR avec XMLHttpRequest, j'ai cru comprendre que c'était la solution.
Je sais maintenant manipuler cette méthode grâce à la FAQ sur les listes déroulantes dynamiques mais pour remplir un formulaire en fonction d'un autre c'est différent non ?

Merci d'avance. :ccool:
04/08/2010, 10h34
javatwister

bonjour

Citation:

Envoyé par dav2k

Hello :coucou:.
Maintenant ce que j'aimerais c'est envoyer les données saisies depuis le 2ème formulaire (une ou plusieurs cases à cocher saisies) vers le premier pour remplir la première liste déroulante indicative.

donc, tu n'as pas besoin de manipuler des données serveur...

donc, DOM est ton complice!
04/08/2010, 11h02
dav2k

Ah, merci!
J'ai modifié le titre du sujet du coup!
Je regarde et j'update dès que j'ai trouvé la solution où dès que j'suis coincé :mrgreen:.
04/08/2010, 11h12
SpaceFrog

popup ? une vaie ?

ça relève de la communication mère fille ...

cf les contribution il y a tout un thread de Auteur sur le sujet
http://www.developpez.net/forums/d27...enetre-enfant/
04/08/2010, 11h23
dav2k

Bah ouais un window.open.

Cette solution permet-t-elle d'envoyer des informations dans les 2 sens ?

Il faudrait que je puisse (à l'ouverture de la popup) envoyer des informations sur le contenu du select du premier formulaire afin de "pré-cocher" les checkbox du 2ème formulaire.
Et dans l'autre sens, si on décoche une pré-sélection dans le 2ème formulaire, à la validation le select du premier formulaire est mis à jour.

En tout cas, merci pour les infos SpaceFrog! ;)
04/08/2010, 11h32
javatwister

ben oui, tout est possible vu que tu travailles avec les données de 2 pages parente / enfant;
mais comme je te disais, il faut que tu apprennes à nommer les éléments de la page que tu veux modifier, et nommer les fenêtres elles-mêmes (donc, potasse DOM);
04/08/2010, 11h59
dav2k

Yep j'ai bien saisi le raisonnement, mes éléments sont bien nommés et j'arrive à les exploiter comme dans l'exemple en utilisant un input ou un textarea, donc une saisie "unique" et les infos transitent bien entre les 2 form! (Youpi :mrgreen:)

Maintenant sachant qu'un des contenus de la fenêtre Fille est aléatoire (les checkbox en l'occurrence), comment faire pour récupérer uniquement les éléments qui sont cochés ?

Edit: Question bête, j'ai trouvé la réponse tout seul : http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-30233917

Bon j'ai encore besoin de votre aide!

Donc j'ai dans mon 2ème formulaire mon input:

Code:

<input type="checkbox" name="list[]" id="inFille"/>

Cet input est généré dans une boucle while sur un mysql_fetch_row.

J'aimerais retranscrire toutes les cases cochées dans le select de mon premier formulaire:
Code:

1 2 <select name="list2" id="outFille" size="10"> </select>
Je précise que je suis novice en JS ... :oops:
J'ai donc tenté de créer une fonction qui reprend l'idée de l'exemple avec une vérification sur le checked mais j'ai bien peur d'être coincé après le if:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function TransfertMereFille() { var elmtWinParent=document.getElementById("inMere"); var elmtWinFille=fenFille.document.getElementById("outMere"); elmtWinFille.value = elmtWinParent.value; } function TransfertFilleMere() { var elmtWinParent=window.opener.document.getElementById("outFille"); var elmtWinFille=document.getElementById("inFille"); var cases = document.getElementsByName('liste[]'); var IsChecked = false; for (var i = cases.length; i-- && !IsChecked; ) { if (cases.item(i).checked) { elmtWinParent.value=elmtWinFille.value; } } }
Comment récupérer les informations du tableau list[] pour les réinscrire dans le select?

Code:

1
2
3
 var cases = document.getElementsByName('liste[]');
 
<input type="checkbox" name="list[]" id="outMere"/>

list vs liste c'est normal ?

04/08/2010, 12h39
dav2k

Ah non effectivement, j'ai du vouloir faire du Franglais... C'est List à la base :)
Et je m'étais planté dans l'id, c'était pas logique...

Mais ça marche toujours pas quand même, je vois pas trop quoi faire après le if en fait... :(
04/08/2010, 12h46
SpaceFrog

ensuite tout dépend d'ou se trouve le script , sur la mère ou la fille ...

document tendrait a dire que le script est sur la fille ou se trouvent les checks ?
04/08/2010, 12h51
dav2k

Le but est de transmettre les "value" des cases cochées sur la page Fille dans un select sur la page Mère ainsi que dans un textarea (lui aussi sur la page Mère).
04/08/2010, 13h10
SpaceFrog

essaye déja de faire un alert sur la fille avec les valeurs selectionnées dans la fille
on verra ensuite comment les passer à la mère
04/08/2010, 13h55
dav2k

L'alert me retourne [object NodeList] autant de fois qu'il y a de cases cochées...

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript">
function TransfertFilleMere()
{
 var selvals =new Array()
 var cases = document.getElementsByName('liste[]');
 cl=cases.length
  var i=-1;
 while (document.getElementsByName('liste[]')[++i]){
	(cases[i].checked) && (selvals.push(cases[i].value))
	}
 
 alert(selvals)
}
 
</script>
 
</head>
<body>
 <form method="post" action="#">
 
 </form>
<input type="checkbox" name="liste[]" id="inFille0" value="1"/>
<input type="checkbox" name="liste[]" id="inFille1" value="2"/>
<input type="checkbox" name="liste[]" id="inFille2" value="3"/>
<input type="checkbox" name="liste[]" id="inFille3" value="4"/>
<input type="checkbox" name="liste[]" id="inFille4" value="5"/>
<input type="checkbox" name="liste[]" id="inFille5" value="6"/>
<input type="checkbox" name="liste[]" id="inFille6" value="7"/>
<input type="checkbox" name="liste[]" id="inFille7" value="8"/>
<input type="checkbox" name="liste[]" id="inFille8" value="9"/>
<input type="checkbox" name="liste[]" id="inFille9" value="10"/>
<input type="button" onclick="TransfertFilleMere()" value="go"/>
 
</form>
</body>
</html>

NB: un id doit etre unique sur la page

A partir de là il ne te reste plus qu'a passer l'array à la mère et boucler sur options du select pour tester les valeurs et les selectionner ..

04/08/2010, 15h48
dav2k

Si j'ai bien compris, ce tableau contient les ID avec la valeur des cases cochées à "on".
J'ai donc modifié mon script du côté de la page Fille de façon à ce que les ID correspondent à "inFille" + l'id de l'enregistrement SQL, comme ça au moins chaque ID est unique.
Cependant je vois que dans ton exemple, l'ID commence à 0, est-ce que c'est important ?

Sinon :

Code:

alert(selvals)

Retourne : on,on,on,on (autant de fois qu'il y a de cases cochées)
Est-ce normal ?

Citation:

Envoyé par SpaceFrog

A partir de là il ne te reste plus qu'a passer l'array à la mère et boucler sur options du select pour tester les valeurs et les selectionner ..

Je vois pas trop comment faire ça puisque seuls les valeurs des cases cochées et leur ID transitent., je n'ai visiblement pas la valeur finale. (La 2ème colonne de l'enregistrement SQL coché dans la page Fille).
Car réellement on coche un ID et pas un texte et le résultat final c'est quand même de ré afficher les informations sélectionnées et non pas leurs IDs!

Est-ce qu'il faut obligatoirement lire la table SQL une fois de plus afin de comparer les ID avec les enregistrements SQL pour pouvoir remplir le select ou existe-t-il une autre méthode?
04/08/2010, 16h12
SpaceFrog

il me semble ne pas avoir vu de values à tes checkboxes ???
04/08/2010, 16h18
dav2k

Citation:

Envoyé par SpaceFrog

il me semble ne pas avoir vu de values à tes checkboxes ???

Non effectivement elles n'en avaient pas...

Dans la page Fille j'ai un tableau avec une case à cocher dans une colonne et la valeur dans l'autre.
Et la value de la checkbox serait donc le texte de l'autre colonne.

Hors là on récupère que les ID exact?

Merci pour l'aide en tout cas, je ne pense pas que je m'en sortirais tout seul..

Edit : En rajoutant le résultat de la requête SQL en tant que valeur de chaque checkbox j'ai bien les valeurs cochées quand je fais un alert(selvals) :mrgreen:.
Maintenant reste à savoir comment les exploiter dans la liste déroulante de la page Mère :ccool:.

Voici la fonction finale si ça peut servir à quelqu'un d'autre :

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
26
27
28
29
30
 
function TransfertFilleMere()
{
 var elmtWinParent=window.opener.document.getElementById("outFille");
 var elmtWinFille=document.getElementById("inFille");
 
//Un tableau est créé et pour chaque case cochée on ajoute un enregistrement.
 
 var selvals =new Array()
 var cases = document.getElementsByName('list[]');
 cl=cases.length
  var i=-1;
 while (document.getElementsByName('list[]')[++i]){
	(cases[i].checked) && (selvals.push(cases[i].value))
	}
 
// On renvoie les infos à la page mère
 elmtWinParent.value=selvals;
 
// Idem mais pour une liste déroulante
 var idsel=window.opener.document.getElementById('idsel')
 var i=-1;
 while(selvals[++i]){ 
	var newOption= document.createElement('option') 
	newOption.innerHTML= selvals[i]
	newOption.value= i
	idsel.options[i]=newOption
	}
	document.idsel.appendChild(newOption)
}

Le code n'est peut être pas optimisé mais il fonctionne.
Merci à SpaceFrog et javatwister pour leur aide! :ccool:

04/08/2010, 19h30
SpaceFrog

Citation:

Le code n'est peut être pas optimisé mais il fonctionne.

Oui mais au moins tu as le mérite d'avoir bien bidouillé avec javascript !!
C'est la meilleure école :ccool:

Je privilégie le fait de mettre les gens sur la voir plutot que de leur filer du code tout cru. C'est nettement plus formateur
04/08/2010, 20h10
dav2k

Je confirme, j'ai beaucoup appris aujourd'hui!

J'ai une dernière question pour toi SpaceFrog!

Imaginons que je coche des cases dans ma page Fille et que je ferme cette page Fille.

Les données sont bien inscrites dans la liste déroulante de la page Mère comme convenu...

Maintenant je réouvre ma page fille, j'aimerais que les cases précédemment cochées soient re-cochées par défaut (En gros il faudrait relire le contenu de la liste déroulante que l'on vient de remplir et passer les checkbox à l'état "checked".)

Qu'elle est la meilleure solution ?
Passer par le PHP en $_GET et traiter les états des checkbox dans la page Fille ?
Ou existe-t-il une alternative avec DOM?
04/08/2010, 20h21
dav2k

Ah, j'ai noté que le select ne se remplit pas sous IE, même en utilisant innerHTML ! :cry:.
04/08/2010, 20h27
SpaceFrog

pour le transfert dans l'autre sens les deux sont possibles, mais la methode js DOM suppose que la fille soit instanciée et c'est une peu plsu complexe (délai de chargement de la fille) il sera plus facile de passer les paramètres en get et de les traiter directement en php ou éventuellement en js sur le onload.

Pour ton srcipt je jetterais un oeil demain ...
à chaque jour suffit sa peine ^^
04/08/2010, 20h29
dav2k

Je crois que j'ai déjà trouvé la solution en fait :

http://support.microsoft.com/kb/276228/fr

Merci Microsoft !

Merci encore, bonne soirée :ccool:
05/08/2010, 07h41
dav2k

Bonjour!

J'ai essayé la solution Microsoft, ça n'a pas l'air de changer grand chose, le select est toujours blanc, les données ne sont pas affichées...
En tout cas le code fonctionne avec tous les navigateurs (chrome, firefox etc ...) mais pas sous IE ... :(
05/08/2010, 09h18
SpaceFrog

tu peux nous montrer ton code en l'état actuel ... ??

Il fallait modifier la boucle, donc créer l'append dedans pour que ça fonctionne sous IE...
Code:

1 2 3 4 5 6 7 while(selvals[++i]){ var newOption= window.opener.document.createElement('option') newOption.innerHTML= selvals[i] newOption.value= i idsel.appendChild(newOption) }
Merci encore SpaceFrog :ccool:

05/08/2010, 10h35
SpaceFrog

et aussi créer l'option dans la mère et pas la fille