Discussion :

[moimp]

Bonjour à tous,
J'ai un formulaire avec plusieurs boutons <input> de type "submit".
J'ai l'écouteur suivant:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
mainForm.addEventListener('submit', function(e)
{
	//e.stopPropagation();
 
	alert(e.currentTarget);
	//if (e.target.eraseAll.name === 'eraseAll') alert('tout');
	//if (e.target.eraseImg.name === 'eraseImg') alert('Image');
	//alert(e.target.name);
 
 
}, false);

J'ai essayé tout ce que j'ai pu mais je n'arrive pas à savoir comment connaître le bouton qui a été à l'origine de la soumission du formulaire.
J'ai également essayé de mettre un écouteur sur chacun des boutons mais dans ce cas je n'arrive pas à appliquer un preventSubmit sur le formulaire.

[mathieu]

essayer avec "e.explicitOriginalTarget".
cela fonctionne avec Firefox mais ça reste à tester sur les autres navigateurs.

[moimp]

Malheureusement, comme l'indique la documentation, cela ne fonctionne pas à l'exception de Firefox. Il me faut quelque chose de standard.

[ProgElecT]

Salut

mainForm.addEventListener('submit', function(e)
mainForm.addEventListener('submit', function(e))
A moins que se ne soit un mauvais copier/coller

[Beginner.]

Salut,

Ben est-ce qu'ils ont un identifiant ou un attribut spécifique (name ou autre) ?

Je ne comprends pas ce que tu veux faire avec e.target.eraseAll.name ou e.target.eraseImg.name ?

[moimp]

mainForm.addEventListener('submit', function(e)
mainForm.addEventListener('submit', function(e))
A moins que se ne soit un mauvais copier/coller

Tu n'as pas du voir la suite et notamment la ligne 11.

[ProgElecT]

désolé mais comme elle était cachée

[Beginner.]

Ben est-ce qu'ils ont un identifiant ou un attribut spécifique (name ou autre) ?

Je ne comprends pas ce que tu veux faire avec e.target.eraseAll.name ou e.target.eraseImg.name ?

Pour le deuxième point, je veux dire par exemple au lieu de if (e.target.eraseAll.name === 'eraseAll') essai if (e.target.name === 'eraseAll') (ce qui suppose que l’élément a un attribut "name" dont la valeur est "eraseAll").

[danielhagnoul]

Je pense qu'il est impossible de déterminer l'élément à l'origine de l'événement "submit" si vous placé le gestionnaire d'événement sur l'élément FORM. Il faut écouter les éléments "input" ou "button". Exemple :

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
<form id="myForm">
    <input type="number" name="nombre" min="0" max="100" step="1" value="50">
    <select name="mois">
        <option value="1">Janvier</option>
        <option value="2">Février</option>
        <option value="3">Mars</option>
        <option value="4">Avril</option>
        <option value="5">Mai</option>
        <option value="6">Juib</option>
        <option value="7">Juillet</option>
        <option value="8">Août</option>
        <option value="9">Septembre</option>
        <option value="10">Octobre</option>
        <option value="11">Novembre</option>
        <option value="12">Décembre</option>
    </select>
    <input type="text" name="nom">
    <input type="submit" name="soumettre" value="Soumettre">
    <input type="submit" name="envoyer" value="Envoyer">
    <button type="submit" name="valider">Valider</button>
</form>

Code JavaScript :

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
const
    elemForm = document.querySelector('#myForm'),
    elemSoumettre = elemForm.querySelector('input[name="soumettre"]'),
    elemEnvoyer = elemForm.querySelector('input[name="envoyer"]'),
    elemValider = elemForm.querySelector('button[name="valider"]'),
    evHandlerSubmit = ev => {
        ev.stopPropagation();
        ev.preventDefault();
 
        console.log(ev.target);
    };
 
elemSoumettre.addEventListener('click', evHandlerSubmit, {
    capture: false,
    passive: false, // false pour ev.stopPropagation(); et ev.preventDefault();
    once: false
});
 
elemEnvoyer.addEventListener('click', evHandlerSubmit, {
    capture: false,
    passive: false, // false pour ev.stopPropagation(); et ev.preventDefault();
    once: false
});
 
elemValider.addEventListener('click', evHandlerSubmit, {
    capture: false,
    passive: false, // false pour ev.stopPropagation(); et ev.preventDefault();
    once: false
});

[moimp]

Merci à vous tous. En fait par manque d'expérience, je me suis posé une mauvaise question. Je n'avais pas compris qu'un e.preventDefault() dans l'écouteur de n'importe quel input s'appliquait au formulaire parent. La solution est en fait toute simple:

Code javascript :

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
"use strict";
 
const
	eraseImg	= mainForm.querySelector("input[name='eraseImg']"),
	eraseAll	= mainForm.querySelector("input[name='eraseAll']");
 
// Gestion des messages d'alerte
eraseImg.addEventListener('click', function(e)
{
	if (! confirm(fromPHPtoJS.alertImg))
	{
		e.preventDefault();
	}
}, { capture: false, passive: false, once: false } );
 
eraseAll.addEventListener('click', function(e)
{
	if (! confirm(fromPHPtoJS.alertAll))
	{
		e.preventDefault();
	}
},  { capture: false, passive: false, once: false } );