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...