Discussion :

[imoak]

bonjour,

je travail sur une page qui nécessité une variable (mois) pour afficher son continue

alors j'utilise la formulaire suivante( avec action="<?php echo $_SERVER['PHP_SELF']; ?>") :

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
 
<form method="post" id="formdate" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <label for="sel1">Selectionnez le mois:</label>
        <br>
            <select name="mois" class="form-control" id="sel1">
                        <option>Janvier</option>
                        <option>Février</option>
                        <option>Mars</option>
                        <option>Avril</option>
                        <option>Mai</option>
                        <option>Juin</option>
                        <option>Juillet</option>
                        <option>Août</option>
                        <option>Septembre</option>
                        <option>Octobre</option>
                        <option>Novembre</option>
                        <option>Décembre</option>
          </select>
          <input type="submit" name="envoi" id="action" class="btn btn-success" value="envoyer" />
          </form>

mon code marche très bien.

Mais je veux bien que lorsque je select par exemple le mois Juillet et lorsque la page reload, le select garde en affichage le mois juillet.
alors pour mon cas toujours revient toujours au mois du Janvier.

NB: j'ai besoin de reload la page pour récupérer la nouvelle variable mois.

cordialement

[Watilin]

NB: j'ai besoin de reload la page pour récupérer la nouvelle variable mois.

Fun fact : on n’a jamais besoin de reload. Au final, le rechargement n’est qu’une requête comme une autre, et c’est moins souple qu’une requête ajax.

Pour répondre à ta question, tu peux mémoriser la propriété value de ton élément <select> au moment où sa valeur est modifiée (évènement change).

Code :

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

1
2
3
4
let $sel1 = document.querySelector("#sel1");
$sel1.addEventListener("change", () => {
  localStorage.memorizedMonth = $sel1.value;
});

Au (re)chargement de la page, si l’item localStorage.memorizedMonth est présent, cela signifie qu’il a été sélectionné auparavant. Il suffit alors de repositionner la value :

Code :

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

1
2
3
4
5
6
7
document.addEventListener("DOMContentLoaded", () => {
  ...
 
  if (localStorage.memorizedMonth) {
    $sel1.value = localStorage.memorizedMonth;
    ...
  }

Et on nettoie, parce que c’est courtois de ne pas laisser traîner des trucs dans le localStorage quand on n’en a plus besoin.

Code :

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

delete localStorage.memorizedMonth;

Ça donne ça quand on remet les morceaux dans l’ordre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
document.addEventListener("DOMContentLoaded", () => {
  let $sel1 = document.querySelector("#sel1");
 
  if (localStorage.memorizedMonth) {
    $sel1.value = localStorage.memorizedMonth;
    delete localStorage.memorizedMonth;
  }
 
  $sel1.addEventListener("change", () => {
    localStorage.memorizedMonth = $sel1.value;
  });
});

Et tu peux mettre ce bout de script où tu veux dans la page, au début, à la fin ou dans un fichier externe, car le DOMContentLoaded se chargera de l’exécuter au bon moment.

[Invité]

Bonjour,

je ne vois aucun code JavaScript dans le message initial. Ni de mention à Ajax ("sans rechargement").
Il y a bien un id="sel1", mais pas de code JavaScript associé...

Par contre, on voit un formulaire "POST", et du PHP.

Je déplace la discussion dans le forum PHP.

[Invité]

... je veux bien que lorsque je select par exemple le mois Juillet et lorsque la page reload, le select garde en affichage le mois juillet...

OK.
Donc, en PHP... :

Code php :

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

1
2
<?php
$mois_recu = ( isset($_POST['mois']) )? $_POST['mois'] : ''; // nom du mois sélectionné

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
	<form method="post" id="formdate" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		<label for="sel1">Selectionnez le mois:</label>
		<br>
		<select name="mois" class="form-control" id="sel1">
<?php
		$mois_array = array( 'Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre' );
		foreach( $mois_array as $mois_nom )
		{
			$selected = ( isset($mois_recu) && $mois_nom == $mois_recu )? ' selected="selected"' : '';
?>
				<option value="<?php echo $mois_nom; ?>"<?php echo $selected; ?>><?php echo $mois_nom; ?></option>
<?php		} ?>
		</select>
		<input type="submit" name="envoi" id="action" class="btn btn-success" value="envoyer" />
	</form>

Remarque : au lieu de récupérer le nom du mois ($mois_recu), il est généralement plus judicieux de récupérer le numéro (1,2,...12) ($num_mois_recu) :

Code php :

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

1
2
<?php
$num_mois_recu = ( isset($_POST['num_mois']) )? $_POST['num_mois'] : ''; // numéro du mois sélectionné

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
	<form method="post" id="formdate" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		<label for="sel1">Selectionnez le mois:</label>
		<br>
		<select name="num_mois" class="form-control" id="sel1">
<?php
		$mois_array = array( 1=>'Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre' ); // l'index commence à 1=>'Janvier'
		foreach( $mois_array as $mois_val => $mois_nom )
		{
			$selected = ( isset($num_mois_recu) && $mois_val == $num_mois_recu )? ' selected="selected"' : '';
?>
				<option value="<?php echo $mois_val; ?>"<?php echo $selected; ?>><?php echo $mois_nom; ?></option>
<?php		} ?>
		</select>
		<input type="submit" name="envoi" id="action" class="btn btn-success" value="envoyer" />
	</form>

Compare les 2 codes HTML générés.

[imoak]

Merci jreaux62
problème résolu