Connaître le bouton input déclencheur d'un événement de formulaire

Version imprimable

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

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.

13/05/2018, 13h52
mathieu

essayer avec "e.explicitOriginalTarget".
cela fonctionne avec Firefox mais ça reste à tester sur les autres navigateurs.
13/05/2018, 14h12
moimp

Malheureusement, comme l'indique la documentation, cela ne fonctionne pas à l'exception de Firefox. Il me faut quelque chose de standard.
13/05/2018, 20h50
ProgElecT

Salut

mainForm.addEventListener('submit', function(e) :nono:
mainForm.addEventListener('submit', function(e)) :ccool:
A moins que se ne soit un mauvais copier/coller :aie:
13/05/2018, 20h59
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 ?
13/05/2018, 20h59
moimp

Citation:

Envoyé par ProgElecT

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

Tu n'as pas du voir la suite et notamment la ligne 11.
13/05/2018, 21h02
ProgElecT

désolé :oops: mais comme elle était cachée :calim2:
13/05/2018, 21h44
Beginner.

Citation:

Envoyé par 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").

:salut:

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:

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:

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
});

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:

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 } );