18041 sujets

Questions générales et questions de débutants

Formulaires et submit

Salut tout le monde,
alors voila mon problème:

<form>
titre<input name="zone1" type="text"><input type="submit" name="subChercherZone1" value="chercher"><br>
texte<input name="zone2" type="text"><input type="submit" name="subChercherZone2" value="chercher"><br>
<input name="subChercherAll" value="Recherche multi-criteres">
</form>


Ce formulaire est très très simplifié, il y a en réalité une multitudes de critères.
Besoin :
- l'utilisateur peut rechercher sur un seul critère et uniquement celui là (même si une autre zone est renseignée)
- l'utilisateur peut rechercher sur l'ensemble des critères en cliquant sur "Recherche Multi-criteres"

Tout ça fonctionne correctement, à la réception du formulaire:
- pour la recherche simple critère, je regarde si un name d'un submit est posté et je fais le lien avec le champ correspondant
- pour la recherche multi-critères, je regarde si subChercherAllest posté et du coup je traite en conséquence.

Mon seul problème est lorsque je saisi un texte dans une zone et appuie sur entrée pour valider le formulaire, le submit retourné est toujours le premier cad subCercheZone1 dans l'exemple.
Comment faire pour que cela ne soit plus le cas? Je saisie zone2, j'appuie sur entrée et cette action valide subChercherZone2 ?

Évidemment, je cherche la solution la plus simple possible. Je sais qu'en javascript il y a moyen de le faire mais j'aimerai le faire en tout html. Il n'y a pas moyen de lier un input texte à un submit particulier?

Merci beaucoup pour vos réponses.
Le plus simple pour l’utilisateur serait d’avoir un seul bouton valider.

«l'utilisateur peut rechercher sur un seul critère et uniquement celui là (même si une autre zone est renseignée)»
À mon avis, si l’utilisateur s’embête à remplir plusieurs champs ce n’est pas pour faire une recherche simple par la suite.
si car la recherche est rappelée dans la zone après validation. l'utilisateur a donc potentiellement plusieurs zones de remplies simultanément.
Rajoute une boîte à cocher devant chaque champ de recherche ou bien un champ de sélection «Rechercher sur…» avec pour valeurs : titre, texte, tous les champs.

Après il y a la solution de passer par javascript, avec tous les inconvénients que cela suppose.

Tu pourrais l’implémenter de cette façon par exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Recherche simple ou complète</title>
</head>
<body>
<noscript>Pour profiter de toutes les fonctionnalités du site, veuillez activer le javascript. <a href="http://www.maboite.qc.ca/activation_js.html">Com­ment ac­ti­ver le ja­vas­cript&nbsp;?</a></noscript>
<form id="recherche" method="post" target="#">
	<label for="zone1_visible">titre</label><input name="zone1_visible" id="zone1_visible" type="text"/><button id="subChercherZone1">chercher</button><br/>
	<label for="zone2_visible">texte</label><input name="zone2_visible" id="zone2_visible" type="text"/><button id="subChercherZone2">chercher</button><br/>
	<button id="subChercherAll">Recherche multi-critères</button>
	<input type="hidden" id="zone1" name="zone1"/>
	<input type="hidden" id="zone2" name="zone2"/>
</form>
<script type="text/javascript">
<!--
	/**
	 * Rempli les champs cachés suivant le masque et envoi le formulaire.
	 *
	 * @param chaîne de caractères contenant des 0 ou des 1.
	 */
	function envoyer(masque) {
		"use strict";
		var i;
		for (i = 0; i < masque.length; i += 1) {
			if (masque.charAt(i) === '1') {
				document.getElementById("zone" + (i + 1)).value = document.getElementById("zone" + (i + 1) + "_visible").value;
			} else {
				document.getElementById("zone" + (i + 1)).value = "";
			}
		}
		document.getElementById("recherche").submit();
	}

	window.onload =  function () {
		"use strict";
		document.getElementById("subChercherZone1").onclick = function () {
			envoyer("10");
		};
		document.getElementById("subChercherZone2").onclick = function () {
			envoyer("01");
		};
		document.getElementById("subChercherAll").onclick = function () {
			envoyer("11");
		};
		document.getElementById("subChercherZone1").onkeyup = function () {
			envoyer("10");
		};
		document.getElementById("subChercherZone2").onkeyup = function () {
			envoyer("01");
		};
		document.getElementById("subChercherAll").onkeyup = function () {
			envoyer("11");
		};
	};
//-->
</script>
</body>
</html>
Merci pour vos réponses.
En fait je me tourne vers cette solution :
- un submit par champ de recherche simple. De cette façons la touche entrée fonctionne.
- un bouton "multi-criteres" (qui sera très peu utilisé) en bas qui va chercher les valeurs en js et construit une url avec.
Sujet clos
Aller à