Discussion :

[moimp]

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;

[moimp]

C'est bon j'ai trouvé tout seul. Il me fallait ajouter une option vide en début de liste.