[Résolu] Submit par clic et clavier

Bonjour à tous

Cette question est la suite de http://forum.alsacreations.com/topic-1-75765-1-RnsoluSubmitimageetclavier.html

Dans un menu, j'ai mis une icône de recherche qui lance une recherche Google sur un site.
voici l'adresse du fichier de test
http://paralletes.free.fr/tests/menu-icons.html
(les couleurs sont là pour mettre les éléments en évidence)

Opération:
1) on clique sur l'icône, ce qui fait apparaître un champ de recherche
2) on remplit le champ avec la chaîne de caractères recherchée
3) si on termine par "return", la recherche se fait bien
4) si on clique sur l'icône à nouveau
4a) si le champ est vide, le champ de recherche est caché
4b) si le champ est rempli, la recherche sur Google est lancée, comme dans le point 3) ci-dessus

Tout marche bien, sauf 4b) La zone de recherche disparaît mais la requête n'est pas effectuée.

Je rappelle que dans le fil précédent la question était inverse: comment faire pour que l'appui sur "return" provoque l'envoi de la requête à Google? Le code de l'époque fonctionnait bien avec un clic.

Merci de votre aide dans la solution de cet agaçant problème.
Modifié par PapyJP (21 May 2015 - 16:01)

Bonjour,

Dans ton code :

function showSearchForm() {
                    var searchForm = document.getElementById('siteSearchForm');
                    if (searchForm.style.display == '') {
                        siteSearchSubmit();
                        searchForm.style.display = 'none';
                    } else searchForm.style.display = '';
                }

que tu appelles au click sur la loupe le siteSearchSubmit(); fonctionne bien mais une fois qu'il a return true... tu n'en fais rien... du coup il return bien true et met bien à jour le Googleinput mais ensuite le code continu et exécute searchForm.style.display = 'none'; et ... c'est tout... il ne l'envoi pas car c’était pas un submit à la base, juste un click...
Modifié par _laurent (21 May 2015 - 16:42)

_laurent a écrit :
Bonjour,

Dans ton code :

function showSearchForm() {
                    var searchForm = document.getElementById('siteSearchForm');
                    if (searchForm.style.display == '') {
                        siteSearchSubmit();
                        searchForm.style.display = 'none';
                    } else searchForm.style.display = '';
                }

que tu appelles au click sur la loupe le siteSearchSubmit(); fonctionne bien mais une fois qu'il a return true... tu n'en fais rien... du coup il return bien true et met bien à jour le Googleinput mais ensuite le code continu et exécute searchForm.style.display = 'none'; et ... c'est tout... il ne l'envoi pas car c’était pas un submit à la base, juste un click...

Merci Laurent
Tu as sans doute raison mais je ne comprends pas: quand je fais siteSearchSubmit(); je pensais que ça allait faire un submit du formulaire.

J'ai un autre formulaire similaire avec

<input type="image" src="/loupe-1.gif" alt="submit" title="Search News pages..." onclick="this.form.submit();"/>

qui marche fort bien, mais l'image est DANS le formulaire, et je ne peux pas mettre mon image dans le formulaire si je veux l'utiliser pour montrer/cacher la zone de saisie.

J'ai bien essayé de mettre l'image deux fois, mais c'est pas coton pour la superposer exactement, il est tout de même préférable de l'avoir en dehors.

Que proposes tu comme solution?

SI je n'ai pas mieux, je mettrai deux images et je ferai mon possible pour que ça se superpose, mais j'aimerais mieux quelque chose de moins .. de plus... enfin, tu vois ce que je veux dire!

PapyJP a écrit :
quand je fais siteSearchSubmit(); je pensais que ça allait faire un submit du formulaire.

Juste parce qu'il y a "Submit" dans le nom ?

Là l'action c'est un clique sur un href en dehors du form. Et même si le href était dans le form cela reste toujours un click sur un href et non un submit du form comme le ferait un input type="submit" ou un this.form.submit(); comme tu le propose.

<a href="javascript : showSearchForm();">

Justement, partons de ta proposition.
showSearchForm se passe bien : il va voir s'il y a quelque-chose dans le champs et return true ou false. C'est pratique dans le cas de ton input type submit. Mais pour le click, comme je te l'ai dit plus haut il te return un "true" mais tu n'en fait rien. Utilise le dans un truc du genre (à chaud, pas testé) :

function showSearchForm() {
                    var searchForm = document.getElementById('siteSearchForm');
                    if (searchForm.style.display == '') {
                        if( siteSearchSubmit() ){ // ici il te return true si le champ est rempli sinon false.
                              // si c'est true -> on force un submit en js
                        }else{
                              // si c'est false -> masque le champs
                              searchForm.style.display = 'none';
                        }
                    } else searchForm.style.display = '';
                }

Modifié par _laurent (21 May 2015 - 17:24)

Quel idiot je fais!

Je croyais avoir écrit

searchForm.submit();

Je modifie et je vérifie avant de marquer e sujet comme résolu!

Merci encore de m'avoir -- une fois de plus -- remis les yeux en face des trous.
Modifié par PapyJP (21 May 2015 - 17:36)

Bien sûr, ca marche!!
Merci encore!!!

if (searchForm.style.display == '') {
                        searchForm.submit();
                        searchForm.style.display = 'none';
                    } else searchForm.style.display = '';

Attention c'est pas exactement ce que j'ai mis hein, là que le champs soit vide ou pas ca envoie direct sur google

_laurent a écrit :

if (searchForm.style.display == '') {
                        searchForm.submit();
                        searchForm.style.display = 'none';
                    } else searchForm.style.display = '';

Attention c'est pas exactement ce que j'ai mis hein, là que le champs soit vide ou pas ca envoie direct sur google

Effectivement,je pensais que ça allait appeler la fonction siteSearchSubmit(= qui est le "onsubmit" de ce formulaire, mais ça n'a pas l'air de marcher.
Je vais faire un "if()" judicieux, quitte à dupliquer le code.

if(siteSearchSubmit()) searchForm.submit();

Ça marche!

Bonsoir,

Ce post juste pour dire que :

<input type="image" src="/loupe-1.gif" alt="submit" title="Search News pages..." onclick="this.form.submit();"/>

Est un code redondant parce qu'un clic sur le bouton a déjà comme action par défaut de soumettre le formulaire; et donc on a le risque que le formulaire soit envoyé deux fois dans certains cas.

QuentinC a écrit :
Bonsoir,

Ce post juste pour dire que :

<input type="image" src="/loupe-1.gif" alt="submit" title="Search News pages..." onclick="this.form.submit();"/>

Est un code redondant parce qu'un clic sur le bouton a déjà comme action par défaut de soumettre le formulaire; et donc on a le risque que le formulaire soit envoyé deux fois dans certains cas.

Merci Quentin
Je n'avais jamais eu l'occasion d'utiliser les <input type="image">
Je vais corriger.

Correction effectuée ce matin.

Pour ceux que ça intéresse, voici le formulaire de saisie corrigé:

<form id="newsSearchForm" action="..." method="get" onsubmit="return fonction_onsubmit();">
    <input id="newsSearchInput" type="text" placeholder="Search News pages..." required="required" autocomplete="off"/>
     <input type="image" src="/loupe-1.gif" alt="submit" title="Search News pages..."/>
     <input id="googleInput" name="q" value="" type="hidden"/>
     <input name="hl" value="en" type="hidden"/>
     <input type="submit" value="Search" style="display:none"/>
</form>

- si on entre un texte terminé par un retour charriot, c'est comme si on avait cliqué sue le bouton "Submit" (ici caché): le formulaire est envoyé si fonction_onsubmit retourne true, et n'est pas envoyé si elle retourne false
- même fonctionnement si on clique sur l'image définie par <input type="image"... />
- si quelque part dans du code Javascript on effectue un submit() sur le formulaire, la fonction onsubmit n'est pas appelée, le formulaire est donc envoyé sans contrôle. Il faut écrire if(fonction_onsubmit() form.submit(); ce qui assure que le submit n'est effectué que si les conditions de vérifications sont remplies.
- en particulier c'est le cas si on a mis onclick="this.form.submit();" dans la balise <input type="image"... />

Merci à Quentin et Laurent pour leur aide.