Discussion :

[flipflip]

Bonjour à tous,

J'ai ce formulaire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form id="stock_search-form" action="[...]&p=stock" method="post">
	<div class="grid-1-small-2 mbs has-gutter center" id="input-search">
	<div class="grid-2-small-1 center" id="input-field">
		<div><input type="text" name="itmref" id="stock_search" pattern=".{3,}" title="3 caractères minimum" value="" autocomplete="off" placeholder="Référence / Gencod / Votre code" data-tsccod="XXX"></div>
		<div><input type="number" min="1" size="10" name="quantite" id="quantite" pattern=".{1,}" title="1 caractères minimum" value="1" placeholder="Quantité">
	      	<i class="fa fa-times-circle" id="stock_search-form-reset"></i>
		<i class="fa fa-search" id="input-search-button"></i>
	</div>
	</div>
	<div class="center mbl" id="listresult"></div>
	</div>
</form>

Dessus j'ai plusieurs addEventListener

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
document.getElementById('stock_search-form').addEventListener('input', e => adv.searchItmref(e))
document.getElementById('listresult').addEventListener('click', ({target}) => {
    adv.searchItmSetItem(target.dataset.itmref)
})
document.getElementById('stock_search-form').addEventListener('submit', e => tools.formPost(e, 'stock_search-form'))
document.getElementById('input-search-button').addEventListener('click', e => tools.formPost(e, 'stock_search-form'))
document.getElementById('stock_search-form-reset').addEventListener('click', e => tools.formReset('stock_search-form'))

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    /**
     * 
     * @param {HTMLElement} e 
     * @param {string} form id
     */
    formPost (e, form) {
        e.preventDefault()
        document.getElementById(form).submit()
    }

Ils fonctionnent tous sauf le submit lorsque la personne appuie sur la touche entrée. Aucunes réactions dans la console, j'ai même essayé de remplacer toolsformPost() par un simple console.log mais toujours aucunes réactions et aucunes erreurs alors que la capture de l'event click sur l'object input-search-button lui marche et le formulaire est bien posté. J'utilise la même structure sur 3 autres formulaires et cela marche sans problème. Je suis certain que la connerie est énorme et juste sous mon nez mais à force de voir ce code je vois plus rien

Un oeil neuf pourrait peut-être m'aider ?
Merci d'avance.

[Toufik83]

Bonjour,

Il n'y a aucun bouton de type submit à l'intérieur du formulaire, et puisque le clic sur #input-search-button soumet le formulaire, pourquoi utiliser alors un autre bouton?

Mais il me semble que le formulaire est soumis plusieurs fois, parce que le clic sur le bouton #nput-search-button fait appel à la fonction tools.formPost(e, 'stock_search-form') et cette fonction soumet le formulaire avec document.getElementById(form).submit(); qui déclenche elle même l'écouteur de "submit" qui fait appel encore une fois à la fonction tools.formPost(e, 'stock_search-form');

[flipflip]

Bonjour,

Il n'y a aucun bouton de type submit à l'intérieur du formulaire

Oui je l'ai remplacé par #input-search-button

et puisque le clic sur #input-search-button soumet le formulaire, pourquoi utiliser alors un autre bouton?

Je ne cherche pas à utiliser un autre bouton et à la réflexion ce n'était pas du tout expliqué dans mon 1er message. Je souhaite que le formulaire soit envoyé lorsque l'utilisateur appui sur la touche "entrée" car j'ai des utilisateurs qui utilisent la souris et d'autres le clavier.

[Toufik83]

Bonjour,

Pour la touche entrée tu peux utiliser KeyboardEvent key Property

[flipflip]

Merci de ta réponse.

Mais ce que je ne m'explique pas est que le addEventListener('submit'...) fonctionne pour 3 autres formulaires qui ont exactement la même structure (sauf des champs différents) mais pas pour celui-ci.

L'utilisation de KeyboardEvent key Property va capturer la touche entrée peut importe la zone active de la page alors qu'il me semble que pour un formulaire l'envoi se fait lorsqu'un élément (input, submit) est sélectionné ?

[Toufik83]

Bonjour,

Oui, il faudrait donc attacher l'écouteur des événements keypress ou keydown sur les éléments du formulaire par exemple...