Lier plusieurs formulaires

**dav2k** · 04/08/2010, 09h01

Hello

.

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.

**javatwister** · 04/08/2010, 09h34

bonjour

Envoyé par dav2k

Hello

.
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!

**dav2k** · 04/08/2010, 10h02

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é

.

**SpaceFrog** · 04/08/2010, 10h12

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/

**dav2k** · 04/08/2010, 10h23

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!

**javatwister** · 04/08/2010, 10h32

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);

**dav2k** · 04/08/2010, 10h59

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

)

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

**dav2k** · 04/08/2010, 11h32

Bon j'ai encore besoin de votre aide!

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

Code :

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

<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 :

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

1
2
<select name="list2" id="outFille" size="10">
</select>

Je précise que je suis novice en JS ...

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 :

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
 
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?

**SpaceFrog** · 04/08/2010, 11h38

Code :

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

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

list vs liste c'est normal ?

**dav2k** · 04/08/2010, 11h39

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...

**SpaceFrog** · 04/08/2010, 11h46

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 ?

**dav2k** · 04/08/2010, 11h51

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).

**SpaceFrog** · 04/08/2010, 12h10

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

**dav2k** · 04/08/2010, 12h55

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

**SpaceFrog** · 04/08/2010, 13h59

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
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 ..

**dav2k** · 04/08/2010, 14h48

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 :

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

alert(selvals)

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

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?

**SpaceFrog** · 04/08/2010, 15h12

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

**dav2k** · 04/08/2010, 15h18

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)

.
Maintenant reste à savoir comment les exploiter dans la liste déroulante de la page Mère

.

**dav2k** · 04/08/2010, 17h38

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

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
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)
}