Question Complétion Informations Redondance

**Sophiaduweb** · 28/06/2016, 16h07

Bonjour tous le monde!

Je suis en train de développer un bout de programme mais je bloque sur le développement d'une fonctionnalité.

Mon programme ressemble à ceci (Image) :

Nom : Question.png
Affichages : 99
Taille : 10,9 Ko

Voici le code :

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
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
 
<?php 
//include("connexion.php"); 
?>
<form name="formulaire" method="post" action="traitement.php">
	<table width="100%" border="0" cellspacing="2" cellpadding="5">
		<tr>
			<td  align="center" colspan="3" bgcolor="#38B070">&nbsp;</td>
		</tr>
		<tr align="center">
			<td  align="center" colspan="1" bgcolor="#68D0B0">Domicile Familial</td>
			<td  align="center" colspan="1" bgcolor="#68D0B0">Le Papa</td>
			<td  align="center" colspan="1" bgcolor="#68D0B0">La Maman</td>
		</tr>
		<tr>
			<td style="padding-right: 0px;">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr>
						<td width="20%" nowrap="nowrap" bgcolor="#68D0B0">Adresse</td>
						<td align="left" bgcolor="#FFFFFF"><textarea rows="4" cols="43" name="adresseFamille" id="adresseFamille" ></textarea></td>
					</tr>
					<tr>
						<td width="20%" nowrap="nowrap" bgcolor="#68D0B0">CP</td>
						<td align="left" bgcolor="#FFFFFF"><input name="cpFamille" id="cpFamille" type="text" size="5" maxlength="5"></td>
					</tr>
					<tr>
						<td width="20%" nowrap="nowrap" bgcolor="#68D0B0">Ville</td>
						<td align="left" bgcolor="#FFFFFF"><input name="villeFamille" id="villeFamille" type="text" size="40" maxlength="35"></td>
					</tr> 
					<tr>
						<td width="20%" nowrap="nowrap" bgcolor="#68D0B0">Pays</td>
						<td align="left" bgcolor="#FFFFFF">
							<select name="paysFamille" id="paysFamille" size="1">
								<option value="0"> Choisir </option>
								<option value="1"> France </option>
								<option value="2"> Belgique </option>
								<option value="3"> Autre </option>
							</select>
						</td>
					</tr> 
				</table>
			</td>
			<td style="padding-left: 0px;">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr>
						<td align="left" bgcolor="#FFFFFF"><textarea rows="4" cols="43" name="adressePapa" id="adressePapa" ></textarea></td>
					</tr>
					<tr>
						<td align="left" bgcolor="#FFFFFF"><input name="cpPapa" id="cpPapa" type="text" size="5" maxlength="5"></td>
					</tr>
					<tr>
						<td align="left" bgcolor="#FFFFFF"><input name="villePapa" id="villePapa" type="text" size="40" maxlength="35"></td>
					</tr>
					<tr>
						<td align="left" bgcolor="#FFFFFF">
							<select name="paysPapa" id="paysPapa" size="1">
								<option value="0"> Choisir </option>
								<option value="1"> France </option>
								<option value="2"> Belgique </option>
								<option value="3"> Autre </option>
							</select>
						</td>
					</tr>                
				</table>
			</td>
			<td style="padding-left: 0px;">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr>
						<td align="left" bgcolor="#FFFFFF"><textarea rows="4" cols="43" name="adresseMaman" id="adresseMaman"></textarea></td>
					</tr>
					<tr>
						<td align="left" bgcolor="#FFFFFF"><input name="cpMaman" id="cpMaman" type="text" size="5" maxlength="5"></td>
					</tr>
					<tr>
						<td align="left" bgcolor="#FFFFFF"><input name="villeMaman" id="villeMaman" type="text" size="40" maxlength="35"></td>
					</tr>
					<tr>
						<td align="left" bgcolor="#FFFFFF">
							<select name="paysMaman" id="paysMaman" size="1">
								<option value="0"> Choisir </option>
								<option value="1"> France </option>
								<option value="2"> Belgique </option>
								<option value="3"> Autre </option>
							</select>
						</td>
					</tr>                
				</table>
			</td>
		</tr>
		<tr>
			<td  align="center" colspan="3" bgcolor="#38B070">&nbsp;</td>
		</tr>
	</table>
	<input type="submit" value="Valider" name="Valider" class="bouton_perso_afficher_menu_reduit">
</form>

Nous voyons qu'il y a trois colonnes d'adresse à renseigner : celui du domicile familial , celui du papa et celui de la maman.

Dans l’idéal, ce que j'aimerai, c'est que lorsqu'on renseigne une informations dans "Domicile familial" l'information est directement dupliquée dans "Papa" et "Maman" ... par "redondance", et ce, de manière instantanée (A chaque "clic" du clavier, ou lorsqu'on sort du champ de saisie).
(Mais ça ne doit pas empêcher pour autant l'utilisateur de renseigner des informations spécifiques chez le papa ou la maman).

Comment faire ?

Quelqu'un peut-il m'aider ?

Merci d'avance!

Soso

**CosmoKnacki** · 28/06/2016, 20h28

Dans ce cas c'est plutôt une question Javascript. Tu dois définir un "eventlistener" qui déclenche la copie lorsque tu quittes le textarea (événement "onblur").

Maintenant est-ce que cette fonctionnalité est vraiment pratique? Dans le cas où le "Papa" et la "Maman" n'ont pas la même adresse, voire même que "bébé" soit confié à un autre tuteur légal, à chaque fois il faudra effacer l'adresse ajoutée automatiquement pour renseigner la bonne. Autre chose, que se passe-t-il quand un ou les deux parents sont décédés, ou dans le cas d'une famille homoparentale?

**scvo.0ne** · 28/06/2016, 22h37

+1, c'est pas du PHP mais du JS

En gros, l'idée c'est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
function copieTextarea() {
document.getElementById('zone2').value = document.getElementById('zone1').value;
}
</script>
 
....
<textarea id="zone1" oninput="copie()"></textarea>
 
...
 
<textarea id="adressePapa"></textarea>

Ou en utilisant un onblur= au lieu de oninput. Et d'accord, ca me parait plus ergonomique de mettre un bouton copier plutot que de copier le contenu automatiquement.

**CosmoKnacki** · 29/06/2016, 00h26

Concrètement ce que tu cherches peut se faire comme ça:

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
<head>...
<script type="text/javascript">
(function () { // on encapsule (ça sert essentiellement à éviter les conflits de nommage quand on utilise plusieurs scripts)
    document.addEventListener('DOMContentLoaded', function() { // on ajoute au gestionnaire d'événements une fonction qui se déclenche
                                                               // quand la page est chargée
        var adFam = document.getElementById('adresseFamille'); // on place dans des variables les cibles qui nous intéressent
        var adMam = document.getElementById('adresseMaman');
        var adPap = document.getElementById('adressePapa');
        adFam.addEventListener('blur', function () { // on ajoute au gestionnaire d'événements une fonction qui se déclenche quand le
                                                     // textarea "adresseFamille" perd le focus
            adMam.value = this.value; // on copie son contenu vers les autres textarea 
            adPap.value = this.value; // ("this" désigne l'objet dont il est question soit "adFam")
        }, true);
    }, false);
})();
</script>
</head>
<body>
    <form name="formulaire"...

NB: tu devrais utiliser une feuille de style css pour alléger ton code html.

**Sophiaduweb** · 29/06/2016, 10h25

C'est génial, ça marche parfaitement.

Merci à tous les deux.

Question Complétion Informations Redondance

JavaScript

Discussions similaires

Partager

Partager