Passer les données d'un form à un autre à travers un boutton

**romyney** · 26/07/2018, 21h13

Bonsoir à vous, je suis bloqué depuis avec mes deux (02) formulaires:
j'ai un premier formulaire qui a un tableau et sur chaque ligne j'ai mis évènements double clic, et lorsque je double clic, il me fait apparaître une autre fenêtre avec un autre formulaire qui contient les champs. A ce niveau tout marche, mais maintenant je veux mettre deux boutons dans mon formulaire UP (monter) et Down (descendre) de sorte à ce que lorsque je clic sur UP qu'il me charge les données qui sont sur le premier formulaire dans les champs de même pour DOWN

Merci d'avance !!!

**psychadelic** · 26/07/2018, 23h54

Envoyé par romyney

.../ il me fait apparaître une autre fenêtre avec un autre formulaire qui contient les champs /..

avec quelle méthode ?
c'est une vraie fenêtre appelée par un window.open ou c'est une div qui "s'ouvre" ?

**romyney** · 27/07/2018, 09h46

bonjour merci de me repondre c'est avec la methode open() c'est à dire window.open()

**NoSmoking** · 27/07/2018, 10h41

Bonjour,
dans le cas d'un window.open() le mot clé est window.opener dans la fenêtre « enfant ».

• window.opener sur MDN

• Tu devrais également trouver ton bonheur dans cette discussion : Transférer des informations : fenêtre parent <-> fenêtre enfant

**romyney** · 27/07/2018, 10h49

ok c'est compris, mais le problème ce n'est pas d'ouvrir la fenêtre car ça je le fais déjà et ça marche. le problème c'est de prendre les données d'une ligne du tableau qui se trouve sur la fenêtre parent pour mettre sur les champs text de la fenêtre enfant

**NoSmoking** · 28/07/2018, 19h48

Je n'ai pas repris/relus le lien que je t'ai proposé mais je pense que tout est dedans.

Je te mets un exemple simple de transfert de données inter-fenêtre avec des appels aux fonctions de la page-parent depuis la page-enfant, l'inverse est également possible, cela se fait simplement via une syntaxe du style window.opener.nom_de_la_fonction().

Le code des fichiers exemple :

• page-parent.html

Code html :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Parent] Communication entre page</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="1877992">
<style>
html, body {
  margin: 0;
  padding: 1em;
  font: 1em/1.5 Verdana,sans-serif;
}
main, #main {
  display: block;
  position: relative;
  margin: auto;
  max-width: 60em;
}
h1, h2,h3 {
  color: #069;
}
input, button {
  width: 12em;
  padding: .5em;
  max-width: 12em;
  font: inherit;
}
button {
  cursor: pointer;
}
span {
  display: inline-block;
  min-width: 10em;
}
[id^="champ"] {
  width: 12em;
  padding: .5em;
  border: 1px solid #CCC;
}
[id^="champ"].fond-vert {
  border-color: #080;
  background-color: #DEC;
}
.label {
  text-align: right;
}
.label:after {
  content: ":";
  margin: 0 .5em; 
}
</style>
</head>
<body>
<main>
  <h1>Page parent</h1>
  <p>
    <span class="label">Nom</span><span id="champ-nom">Smith</span>
  </p>
  <p>
    <span class="label">Prénom</span><span id="champ-prenom">John</span>
  </p>
  <p>
    <button id="cde-openPopup">Open Enfant</button>
    <button id="cde-closePopup">Close Enfant</button>
  </p>
</main>
<script>
"use strict";
var winEnfant = null;
 
function closePopup() {
  if (winEnfant) {
    winEnfant.close();
    winEnfant = null;
  }
}
 
function openPopup() {
  winEnfant = window.open("page-enfant.html", "my-win");
  winEnfant.focus();
}
 
function getTextContent(id) {
  var text = null;
  var elem = document.getElementById(id);
  if (elem) {
    text = elem.textContent;
    elem.className = "";
  }
  return text;
}
 
function setTextContent(id, text) {
  var elem = document.getElementById(id);
  if (elem) {
    elem.textContent = text;
  }
  return elem; // pour chainage éventuel
}
 
// initialisation des boutons
var oBtns = document.querySelectorAll("button");
[].forEach.call(oBtns, function (elem) {
  var cde = elem.id.replace("cde-", "");
  elem.onclick = window[cde] || null;
});
</script>
</body>
</html>

• page-enfant.html

Code html :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Enfant] Communication entre page</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="1877992">
<style>
html, body {
  margin: 0;
  padding: 1em;
  font: 1em/1.5 Verdana,sans-serif;
}
main, #main {
  display: block;
  position: relative;
  margin: auto;
  max-width: 60em;
}
h1, h2,h3 {
  color: #069;
}
input, button {
  width: 12em;
  padding: .5em;
  max-width: 12em;
  font: inherit;
}
button {
  cursor: pointer;
}
label {
  display: inline-block;
  text-align: right;
  min-width: 10em;
}
label:after {
  content: ":";
  margin: 0 .5em; 
}
code {
  font-family: "courier new";
  font-size: 1em;
  color: #069;
}
</style>
</head>
<body>
<main>
  <h1>Page enfant</h1>
  <p>
    <label>Nom</label><input id="champ-nom" value="">
  </p>
  <p>  
    <label>Prénom</label><input id="champ-prenom" value="">  
  </p>
  <p>
    <button id="cde-upDateChampsEnfant">Get from parent</button>
    <button id="cde-upDateChampsParent">Set to parent</button>
    <button id="cde-closePage">Ferme la page</button>    
  </p>
  <p>
    <b>Nota</b> : la fonction <code>upDateChampsEnfant()</code> peut être appelée directement sur le <code>load</code> de la page enfant.
  </p>
 
</main>
<script>
"use strict";
var winParent = window.opener;
 
function closePage() {
  // si fenêtre parent existe
  if (winParent) {
    // appel à la méthode de la fenêtre parent    
    winParent.closePopup();
  }
}
 
function upDateChampsEnfant() {
  // si fenêtre parent existe
  if (winParent) {
    var text;
    var oElems = document.querySelectorAll("[id^=champ-]");
    // mise à jour des champs de la page enfant
    [].forEach.call(oElems, function (elem) {
      // appel à la méthode de la fenêtre parent    
      text = winParent.getTextContent(elem.id);
      // mise à jour champ page enfant
      if (text) {
        elem.value = text;
      }
    });
  }
}
 
function upDateChampsParent() {
  // si fenêtre parent existe
  if (winParent) {
    var text;
    var elemParent;
    var oElems = document.querySelectorAll("[id^=champ-]");
    // mise à jour des champs de la page parent
    [].forEach.call(oElems, function (elem) {
      text = elem.value;
      // appel à la méthode de la fenêtre parent
      elemParent = winParent.setTextContent(elem.id, text);
      // modification CSS élément de la page parent
      if (elemParent) {
        elemParent.className = "fond-vert";
      }
    });
  }
}
 
// initialisation des boutons
var oBtns = document.querySelectorAll("button");
[].forEach.call(oBtns, function (elem) {
  var cde = elem.id.replace("cde-", "");
  elem.onclick = window[cde] || null;
});
</script>
</body>
</html>

Il y a quelque astuces comme utiliser les mêmes ID, pour les champs, sur les deux pages ce qui simplifie la gestion.
Rappel qu'en même : une ID doit être UNIQUE dans un document.

D'autres façons de mettre à jour pourraient être utilisées comme celle de passer les données en paramètre de l'url de la page enfant.

Quoiqu'il en soit, regarde le code, teste le, analyse le et ajuste le à ton besoin.

Il existe une autre solution qui est moins « prise de tête » c'est de mettre tout dans la même page, dans une <div> masquée, et d'afficher non pas une fenêtre « popup » mais une fenêtre dite « popin », la <div> masquée en fait.

Passer les données d'un form à un autre à travers un boutton

JavaScript

Discussions similaires

Partager

Partager