Gestion SUBMIT multiples dans FORM html

**boteha** · 24/05/2009, 19h23

Bonjour à tous,

Dans un formulaire, j'ai plusieurs champs de recherche.

Recheche en texte libre
Recherche par référence fabricant

En html de base, je suis obligé d'avoir un bouton SUBMIT pour chaque Input, autrement le navigateur ne sait pas ce que veut faire l'utiliateur.

Par ailleurs, beaucoup d'ulisateurs n'utilisent pas le bouton Ok, ils se contentent d'un retour charriot.
Dans ce cas, les navigateurs ont l'habitude de considérer que c'est l'input le plus haut dans la page qui est validé.

1) Y a-t-il avec Javascript un moyen de gérer proprement ces retours charriot ?

2) Dans une liste de OPTION, y a-t-il un moyen de faire que la recherche est lancée dès que l'utilisateur à choisi son option, sans ajouter encore un bouton SUBMIT.

Merci d'avance.

**olivierPa** · 24/05/2009, 19h47

Tu peux preciser le comportement que tu souahites...

Si j'ai bien compris, tu veux que des que l'utilisateur modifie
un champ de ton formulaire, le formulaire soit soumis (mais
pas necessairement avec la meme action), c'est ca ?

Dans ce cas, c'est faisable en JS sans probleme.

**boteha** · 24/05/2009, 21h25

Bonjour,

Merci de ton intérêt.

En fait, il y a deux problèmes différents.

1) Jete un œil sur www.touslescables.com
Dans le cadre de gauche, tu as trois champs de recherche.
Tu es obligé d'avoir un SUBMIT par champ, autrement tu ne sais pas quel mode de recherche est souhaité.
Dans la vie réelle, de nombreux utilisateurs ne cliquent pas sur le SUBMIT mais envoient un retour charriot ou une touche entrée.
La plupart des navigateurs font alors comme si c'était le premier SUBMIT qui était activé.

Y a-t-il un moyen fiable de détecter la provenance du retour charriot ou entrée de façon à pouvoir traiter la bonne requête ?

2) Afin de permettre d'affiner les recherches par arborescence, j'envisage de permettre à l'utilisateur qui a choisi une catégorie de produits, avec affichage en liste, d'affiner par type de produit et/ou marque, ce qui est d'ailleurs assez classique.
On peut faire un lien vers un tableau matriciel types de produits (en vertical) et marques (horizontal), mais dans la vie réelle plein de gens adorent les choix fermés, donc les liste déroulantes OPTION.
S'il faut encore rajouter des SUBMIT, cela devient un peu lourd, et l'idée est de faire ce que l'on voit partout : quand l'utilisateur relache la souris, sa sélection est appliquée automatiquent sans passer par la case SUBMIT.
Cela me semble assez discutable question ergonomie, mais c'est devenu un standard.

Là, je pense que c'est assez facile avec JS.

Merci d'avance.

**Bovino** · 24/05/2009, 21h50

Tu peux soit mettre trois formulaires, donc chacun avec un seul submit, soit gérer le keyCode sur l'événement onkeydown de tes input.

**olivierPa** · 24/05/2009, 22h13

Bon, je pense que soumettre trois forumlaires differents, c'est vraiment
la solution la plus simple. Sinon, en javascript tu peux faire comme suit
(attention, je ne garanti pas qu'il n'y a pas mieux, je suis loin d'etre un pro).

Sinon voici un exemple : cela t'envoie vers la page rien.php
la variable afaire indique le champ a traitrer.
La soumission se declenche a un return dans le champ ou a une
selection dans le formulaire...

Olivier.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head> 
<script type="text/javascript">
var formulaire;
var champ1,champ2,afaire;
 
function soumet1(e){
        if(!e) e=window.event;
        touche=e.keyCode;       
        if ((champ1.value!=null)&&(touche=='13'))
        { 
                afaire.value="il faut traiter champ1"; 
                alert("C'est parti avec le champ 1");
                formulaire.submit();
        }
}
function soumet2(e){
        if(!e) e=window.event;
        touche=e.keyCode;       
        if ((champ2.value!=null)&&(touche=='13'))
        { 
                afaire.value="il faut traiter champ2"; 
                alert("C'est parti avec le champ 2");
                formulaire.submit();
        }
}
 
function soumet3(){ afaire.value="il faut traiter champ3"; 
        alert("C'est parti avec le champ 3");
        formulaire.submit();}
 
function initalisation(){
        formulaire=document.getElementById("formulaire");
        afaire=document.getElementById("afaire");
        champ1=document.getElementById("champ1");
        champ2=document.getElementById("champ2");
        var champ3=document.getElementById("champ3");
        
        champ1.onkeyup=soumet1;
        champ2.onkeyup=soumet2;
        champ3.onchange=soumet3;
}
 
window.onload=initalisation;
</script>
 
</head>
<html>
<form id="formulaire" action="rien.php" method="get">
<div>
<input id="champ1" name="champ1">
<input id="champ2" name="champ2">
<select id="champ3">
  <option value="rien"> ----- </option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input id="afaire" name="afaire" type="hidden">
</div>
</form>
</html>

**boteha** · 26/05/2009, 17h12

Bonjour,

Merci beaucoup de ta réponse.

Envoyé par olivierPa

Bon, je pense que soumettre trois forumlaires differents, c'est vraiment la solution la plus simple.

Je ne comprends pas ce que tu veux dire...

3 formulaires ou 3 boutons SUBMIT dans 1 seul formulaire ?

Je pense que tu veux dire 3 boutons SUBMIT, c'est ce que je fais, avec l'inconvénient déjà évoqué : quand l'utilisateur utilise la touche charriot ou entrée, tu ne sais quelle requête il veut exécuter.

Je ne vois pas en quoi 3 FORM peuvent résoudre quoi que ce soit par rapport à 3 SUBMIT.

Autrement, merci pour ton code.

Je n'ai pas le temps de le tester cette semaine, j'essaye de regarder pendant le week-end.

Il me semble que le problème est très classique.

Merci encore.

**franculo_caoulene** · 26/05/2009, 17h22

Non, non, trois formulaires, veut bien dire trois formulaires. Dans lesquels il y aura un bouton submit. La touche entrée provoquera la soumission du formulaire dans lequel le champ et le bouton se trouvent.

**boteha** · 26/05/2009, 17h30

Merci de ta réponse

Non, non, trois formulaires, veut bien dire trois formulaires. Dans lesquels il y aura un bouton submit. La touche entré provoquera la soumission du formulaire dans lequel le champs et le bouton se trouvent.

D'accord, je comprends...

Je vais un réfléchir...

**boteha** · 27/05/2009, 11h42

Bonjour,

Je vais installer plusieurs FORM ce week-end.
Je vous tiens au courant.
Merci beaucoup

**SpaceFrog** · 27/05/2009, 12h43

ben pourquoi ne pas tester coté php le isset du name du bouton submit ?

**boteha** · 27/05/2009, 14h46

ben pourquoi ne pas tester coté php le isset du name du bouton submit ?

C'est déjà ce que je fais.
Mais justement, quand l'utilisateur a envoyé une touche chariot ou entrée, tu as un problème, car tu ne peux pas savoir le SUBMIT qui aurait dû être cliqué...
Avec plusieurs FORM, tu connais toujours la provenance (d'après ce que j'ai compris...)

**SpaceFrog** · 27/05/2009, 15h11

alors remplaces les boutons submit par des inputs type button

**boteha** · 27/05/2009, 15h22

alors remplaces les boutons submit par des inputs type button

Qu'est-ce ça change ?

Par ailleurs, je crois bien qu'IE 6 ne gère pas les Input type button, or ce navigateur est encore répandu.

**SpaceFrog** · 27/05/2009, 15h39

un bouton ne declenche pas le submit avec la touche enter

**boteha** · 27/05/2009, 15h53

un bouton ne declenche pas le submit avec la touche enter

D'accord... Merci de ta remarque.
Mais je me souviens avoir eu quelques soucis avec IE 6.

La solution des FORM multiples est très simple, il me semble.
Elle fera plaisir aux habitués de la touche Entrée sans compliquer grand chose côté hlml ou serveur.

**SpaceFrog** · 27/05/2009, 16h24

Sinon une solution consisterait a modifier un input type hidden lors du click d'un bouton et verifier sur le onsbmit si ce champs est renseigné ou pas ...

**franculo_caoulene** · 27/05/2009, 16h52

Qu'as-tu précisément contre l'idée d'utiliser plusieurs formulaires?

**boteha** · 02/06/2009, 11h27

Bonjour,

J'ai créé plusieurs FORM.

Côté serveur, je teste isSet du nom de l'Input text (les boutons submit n'ont plus besoin d'être différenciés ni textés).

Ça marche super bien !

En plus, je peux si nécessaire employer METHOD get ou post selon les formulaires.

Merci encore pour vos bons conseils.

Gestion SUBMIT multiples dans FORM html

JavaScript

Discussions similaires

Partager

Partager