Garder les valeurs sélectionnées dans mes listes déroulantes liées et créées en JS

**Claudine** · 23/11/2015, 09h52

Bonjour à tous,
Je viens de créer un formulaire d'inscription avec 2 listes déroulantes liées et tout fonctionne normalement ;
Viens d'apparaître un détail peu pratique puisque:
Si par hasard on introduit un mot de passe ou nom pas conforme, ces derniers sont signalés par un code d'erreur avec pour résultat la perte de toutes mes données choisies dans mes listes d'où le travail fastidieux de devoir resélectionner toutes les données.
Je suppose qu'il existe un code JS ou PHP adapté à cette situation.
Si une âme charitable peut se pencher sur ce problème, j'en serais très heureuse et à toutes fins utiles je joins le fichier:
Code php:

Code php :

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<?php
// connection à la DB
	include('./connect-bd.php'); 
?>
<?php
 if (!session_id()) session_start();//déclare l'ouverture d'une session si aucune n'a été déclarée auparavant.
 
 if (isset($_POST['envoyer'])) 
{
     function Verif_magicquotes ($chaine)// fonctin qui applique stripslashes si get_magic_quotes_gpc() est activé
    {
		if (get_magic_quotes_gpc()) $chaine = stripslashes($chaine);
 
		return $chaine;
    } 
     $message = array();// Pour enregistrer les messages d'information
    $_SESSION['post_form']['message'] =& $message;// avec & on assigne $message à $_SESSION['post_form']['message'] c.a.d. tout changement dans $message sera répercuté dans $_SESSION['post_form']['message']
 
	$_SESSION['post_form']['motdepasse'] = $motdepasse = isset($_POST['motdepasse']) && trim($_POST['motdepasse']) != '' ? Verif_magicquotes(trim($_POST['motdepasse'])) : null; 
 
	$_SESSION['post_form']['categorie'] = $categorie = isset($_POST['categorie']) && trim($_POST['categorie']) != '' ? Verif_magicquotes(trim($_POST['categorie'])) : null;  
 
 	$_SESSION['post_form']['selection'] = $selection = isset($_POST['selection']) && trim($_POST['selection']) != '' ? Verif_magicquotes(trim($_POST['selection'])) : null;
	$_SESSION['post_form']['province'] = $province= isset($_POST['province']) && trim($_POST['province']) != '' ? Verif_magicquotes(trim($_POST['province'])) : null;
 
	$_SESSION['post_form']['ville'] = $ville = isset($_POST['ville']) && trim($_POST['ville']) != '' ? Verif_magicquotes(trim($_POST['ville'])) : null; 
 
 $_SESSION['post_form']['nom'] = $nom = isset($_POST['nom']) && trim($_POST['nom']) != '' ? Verif_magicquotes(ucfirst(trim($_POST['nom']))) : null;//ucfirst pour convertir le première lettre en majuscule
 
      if (!isset($motdepasse))
	    {
		     $message[] = 'Veuillez choisir votre mot de passe';
		}  
 
     if (isset($nom))
        {
            if (! preg_match('#^[a-zéèàçïêë \']{3,40}$#i',$nom))    
                {
                    $message[] = 'Le nom "'.$nom.'" n\'est pas valide. Minimum 3 lettres, maximum 12. Chiffres non autorisés. Recommencez !';   
                }
        }
    else    
        {
             $message[] = 'Veuillez indiquer votre nom'; 
        }
            //---------
 
 
	// requête pour vérifier si le mot de passe est déjà pris :
 
 
	 //---------------------
	if (isset($motdepasse))
	{
		if (!preg_match("#^[0-9a-zA-Z]+$#", $motdepasse))
		{
			$message[] = 'Le mot de passe ne doit contenir que des caractères alphanumériques (6 à 12 caractères).';
		} elseif (!preg_match("#^[0-9a-zA-Z]{6,12}$#", $motdepasse))
		{
			$message[] = 'Le mot de passe doit contenir entre 6 et 12 caractères alphanumériques.';
		} else 
 
		 try
			 {
			  $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
			  $bdd = new PDO('mysql:host=localhost;dbname=clients', 'root', '', $pdo_options);
 
			  $req = $bdd->prepare('SELECT count(*) as nb FROM coordonnees WHERE motdepasse = ?'); 
 
			  $req->execute(array($motdepasse));
 
 
			  $result = $req->fetch(PDO::FETCH_OBJ);
 
			  if($result->nb != 0)
				  {
				  	$message[] = 'Ce mot de passe est déjà utilisé';
				  }			
			 }
		catch(Exception $e)
		   	 {
				die('Erreur : '.$e->getMessage());//
		   	 }
		}		 
 
 
    if (isset($message) && count($message) == 0)
        {
        header('Location:confJS.php');// envoi à la page confirmation "Confirm.php"
			exit;
		}		
}              
?>  
 
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body bgcolor="#33FFCC"><center>
 
 <script type="text/javascript"> 
function generation_liste2(id_lire,id_ecrire) { <!-- Fonction pour le second menu deroulant liéé au choix dans le premier -->
	var liste2="";	
	//on commence par effacer eventuellement la deuxieme liste au cas ou elle serait affichée, si on reclique sur choisissez
	document.getElementById(id_ecrire).innerHTML="";
 
	//on lit le choix dans liste 1
	var choix_categorie=document.getElementById(id_lire).value; 
 
	switch (choix_categorie) { 
		//on peut tout mettre dans le switch case
		case '0' : return ; break;<!-- si pas de choix retourne rien -->
		<!-- autre choix possible -->
		case 'Aliments' : var tab = new Array ('Bétails','Oiseaux','Chiens/chats','Poissons'); break;
		case 'Animaux' : var tab = new Array ('Nourriture bétails','Alimentation chiens/chats','Vétérinaire'); break;
 
		}
		//generation de la deuxieme liste
	liste2 += '<select name="selection">';
	for (j=0;j<tab.length;j++) { 
		liste2 += '<option value="'+tab[j]+'">'+tab[j]+'</option>';
	}
	liste2 += '</select>';
	//ecriture de la deuxieme liste dans le div la page
	document.getElementById(id_ecrire).innerHTML=liste2;
}
</script>
 
<?php
// connection à listevillesparProvince
	include('./listevillesparProvince.php'); 
 
?>
 
</script>
</head>
<body>
 
<p style="font-size:0.9em; font-style:italic;margin-bottom:1em">Cochez une des cat&eacute;gories ci-dessous, puis une option dans la liste qui s'affichera en fonction de votre choix :
</p>
<form name="form1" method="post" action="">
	<select name="categorie" id="id_liste_categorie" onChange="generation_liste2('id_liste_categorie','id_liste2');">
 
		<option value="0">-- choisissez --</option>
 
		<option value="Aliments">Aliments</option>
		<option value="Animaux">Animaux</option>
 
	</select>
	<div id="id_liste2"><!-- la va etre ecrite la deuxieme liste --></div>
<label>Choisissez une province dans la liste ci-dessous, puis une ville dans la 2ème liste qui va s'ouvrir </label> <BR>
<form name="form2" method="post" action="">
	<select name="province" id="id_liste_province" onChange="generation_liste4('id_liste_province','id_liste4');">
		<option value="0">-- choisissez --</option>
		<option value="Hainaut">Hainaut</option>
		<option value="Namur">Namur</option>
		<option value="Brabant wallon">Brabant wallon</option>
		<option value="Luxembourg">Luxembourg</option>
		<option value="Liège">Liège</option>
	</select>
	<div id="id_liste4"><!-- la va etre ecrite la deuxieme liste --></div>
 
 
<BR>
				<label for="motdepasse"> Mot de passe :</label>
				<input type="text" id="motdepasse" name="motdepasse" value="<?php echo (isset($_SESSION['post_form']['motdepasse'])) ? $_SESSION['post_form']['motdepasse'] : '' ?>" />
</p>
 
			<p>
				<label for="nom"> Nom :</label>
				<input type="text" id="nom" name="nom" value="<?php echo (isset($_SESSION['post_form']['nom'])) ? $_SESSION['post_form']['nom'] : '' ?>" />
			</p>
 
		<p style="margin-top:1.5em">
			<input name = "envoyer" value = "Envoyer" type = "submit"/>
	  </p>	  
 
	</form>	  
	<div style="font-size:0.8em; font-weight:bold">
	<?php
	if(isset($_SESSION['post_form']['message']) && count($_SESSION['post_form']['message']) > 0)
	{
		foreach($_SESSION['post_form']['message'] as $value) echo '<p>- '.$value.'</p>';
	}
	?>
 
	</div>
	</form>
</body>
</html>

Sincères remerciements
Claudine

**SpaceFrog** · 24/11/2015, 08h55

Les saisies d'éléments dynamiques, et les éléments dynamiques non plus d'ailleurs ne survivent pas à un rechargement de page.

Il existes deux façon de remédier à cela :

La première est de conserver quelque part les saisies, soit coté client soit de les passer au serveur pour les restituer sur la page de destination et recréer les éléments et les saisies lors du chargement de la page soit coté serveur en php soit coté client en js.

La seconde, c'est plus simplement de le pas recharger la page et de faire les vérifications au moyens de requêtes ajax...

**Claudine** · 25/11/2015, 10h54

Bonjour SpaceFrog,

Merci pour ces renseignements utiles.
Comme je ne suis pas une spécialiste, je vais essayer de stocker les saisies dans une zone texte situées à côté de la liste déroulante.
Pour simplifier les choses je commence donc par une seule et simple liste déroulante et j'utilise le javascipt comme conseillé pour remplir la zone texte et cà commence mal puisque rien ne s'ajoute dans la zone.
Voudriez-vous regarder où se trouve mon erreur?
Code Php

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript"> 
 onchange="getElementById('categorie_ID').value = this.value">
 </script>
</head>
<body>
<form method="POST" action="traitement.php">
<p>
     <label for= "catégorie" >choisissez une catégorie</label>
 
	 <select name ="categorie" id="categorie">
 
 
             <option value="0"> choisissez </option>
             <option value="metiers">Metiers</option>
             <option value="Professions">Professions</option>
             <option value="Aliments">Aliments</option>
 
      </select>
 
	  <Input type="text" name="categorie_ID" id="categorie_ID" value=" "/>
	  <BR >
</p>
	  	  </form>
</body>
</html>

Remerciements pour votre aide

Claudine

**SpaceFrog** · 25/11/2015, 11h02

l'evènement onchange doit être attribué au select ...

Mais plus grave ... stocker une valeur dans un input ne résoudra pas le problème ... la valeur ne survit pas au rechargement

Il faut stocker dans les cookie ou le localstorage coté client,
ou encore passer la valeur au serveur pour la restituer sur la page de destination

**Claudine** · 25/11/2015, 17h01

Bonsoir Space Frog,

Tout le monde ne peut être un spécialiste de la programmation, alors veuillez essayer de me communiquer certains détails par exemple:
Comment passer la valeur selectionnée sur la listedéroulante au serveur pour la restituer sur la page de destination?
Exemples pratiques ou tutos svp! ou votre exemple personnel me sera d'une grande utilité pour progresser.
sinon à quoi peut servir ce site d'aide à la programmation

Merci
Claudine

**NoSmoking** · 25/11/2015, 18h06

Bonjour,

Exemples pratiques ou tutos svp!

tu pourrais peut être regarder du coté de Comprendre les mécanismes d'AJAX pour commencer.

sinon à quoi peut servir ce site d'aide à la programmation

à donner des pistes mais pas à faire à la place

**Claudine** · 26/11/2015, 15h08

Bonjour NoSmoking

Merci pour ces renseignements, mais avant d'étudier Ajax en profondeur, je crois qu'il est possible de résoudre mon problème en utilisant un formulaire Javascript avec Alert(message) pour les champs obligatoires non remplis y compris pour les listes déroulantes.
Aussi ai-je conçu ce formulaire simple pour appliquer mes dires
Malheureusement il ne fonctionne pas puisque aucun message d'alerte
Voulez-vous situer le problème?

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<SCRIPT language="javascript">
function verif_champs(){
	//fonction javascript qui va verifier successivement tous les champs et si pas rempli message d'alerte ce qui empêche l'envoi du formulaire  
		//pour les listes déroulantes dont le choix est obligatoire:
	//Liste déroulante'catégorie'
	var categorie=document.getElementByid('categorie'); //on atteint l'element par son id
	if(categorie.value==""){
		//si value = vide qui correspond à "Choisissez dans cette liste déroulante"
		alert ('Vous devez selectionner une catégorie!');
		return false; //on sort de la fonction et on empêche l'envoi du formulaire
	}
 
		//pour les champs de saisie obligatoires
 
	//Nom
	var nom=document.getElementByid('nom');
	if(nom.value==""){
		alert ('Vous devez saisir votre nom ');
		nom.focus(); //on met le focus dans le champ manquant
		return false; //empêche l'envoi du formulaire
 
	}
 
	//prénom
	var prenom=document.getElementByid('prenom');
	if(prenom.value==""){
		alert ('Vous devez saisir votre prenom ');
		prenom.focus(); //on met le focus dans le champ manquant
		return false; //empêche l'envoi du formulaire
 
	}
 
	//et si on est arrivé ici c'est que tout est ok donc
	return true; //autoriser l'envoi du formulaire
}
 
</script>
 
</head>
<body>
 
<form name="form1" method="post" action="" class="contact_form" onsubmit="return verif_champs();" >
<p>
 
</span>Choix catégorie :<br>
<select name="categorie" id="categorie" >
<option value="" selected>Choisissez dans la liste déroulante :</option>
<option value="Métiers">Métiers</option>
<option value="Profession">Profession</option>
<option value="Entreprise">Entreprise</option>
<option value="Autre">Autre</option>
</select>
 
<BR >
 
<label for="nom">Votre nom <span>*</span></label>
<input name="nom" type="text" class="inputText" id="nom" size="35" maxlength="1000" />
</p>
<label for="prenom">Votre prenom <span>*</span></label>
<input name="prenom" type="text" class="inputText" id="prenom" size="35" maxlength="1000" />
</p>
 
 
<div class="clear"></div>
<!-- remplaces <a..... etc par le bouton submit -->
<p><input type="submit" name="envoyer" value="Envoyer" />
</form>
 
 
</body>
</html>

Mes remerciements

Claudine

**NoSmoking** · 26/11/2015, 18h22

var categorie=document.getElementByid('categorie'); //on atteint l'element par son id

I et non i pour commencer, je n'ai pas regardé la suite...

Garder les valeurs sélectionnées dans mes listes déroulantes liées et créées en JS

JavaScript

Discussions similaires

Partager

Partager