Bonjour,

Je r�alise un formulaire de recherche en t�te d'une page comprenant plusieurs tableaux.
Ce formulaire comprend :
  • un champ input de type search suivi d'un bouton de validation
  • une liste d'options 'r�cents'
  • une liste d'options 'favoris' (non encore d�velopp�e)

Le bouton de type search fonctionne bien tant qu'il est seul, il ne fonctionne plus apr�s s�lection d'une option de la liste r�cents.
Je voudrais que seul le dernier �v�nement soit pris en compte sans tenir compte des choix pr�c�dents.
Code HTML:
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
<form method="post" class="search">
	<div><input type="search" id="q" name="q" /> <button name="qBtn"><img src="<?= DIR_IMAGES.'glass.png' ?>" /></button></div>
	<div><label for="latest"><?= AFF_LBL_LATEST ?></label> <?= $lstLatest ?></div> <!-- La variable lstLatest contient la liste name='latest' complète -->
	<div><label for="preferred"><?= AFF_LBL_FAVOURITE ?></label> <select></select></div> <!-- Non encore développé -->
</form>
Traitement 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
// Action du bouton q (q = appelation habituelle des boutons de recherche)
// Génère une liste de liens. Fonctionne très bien seul.
if (!empty($_POST['q'])) {
	$result = getSearchData($_POST['q']);
	if ($result) {
		$searchResult = '';
		$pattern = "<a href='%s'>%s, %s, %s, %s</a><br/>";
		foreach ($result as $item) {
			// "parentPage.php?child=2" représente la présente page
			// "idMain est l'id de la personne à afficher
			$searchResult .= sprintf($pattern, "parentPage.php?child=2&idMain=$item->id", $item->id, $item->last_name, $item->first_name, $item->birthdate);
		}
		unset($item);
	}
}
 
// Bloque les actions futures du bouton 'q'
// Action de la liste d'options 'latest'
if (!empty($_POST['latest'])) {
	header("location: parentPage.php?child=2&idMain={$_POST['latest']}");
}
Code JS (fichier s�par�):
Code js : 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
// gestion des champs de recherche
 
"use strict";
 
const	headForm	= document.querySelector('.search'),
		latest		= document.querySelector("select[name='latest']"),
		qSearch		= document.querySelector("input[name='q']")
		qBtn		= document.querySelector("button[name='qBtn']");
 
qBtn.addEventListener('clic', function(e) {
	latest.value = '';
}), false;
 
latest.addEventListener('change', function(e) {
	q.value = '';
	headForm.submit();
}), false;