Formulaire de recherche PHP/JS

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:

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:

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:

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;