addEventListener et submit

**franculo_caoulene** · 22/12/2008, 16h05

Salut,

Je me suis fait ma propre fonction d'ajout d'évènement qui ressemble à ce qu'on peut trouver sur internet. Elle fonctionne plutôt bien sauf pour le submit (et probablement les liens aussi je n'ai pas tester).

Je cherche à empêcher la soumission du formulaire. Il suffit normalement de rajouter un return false; après la fonction. Malheureusement, j'ai beau avoir fait plusieurs essais, la soumission se fait toujours.

Voici un code d'exemple:

Code xhtml :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>empêcher le rechargement de la page à la soumission d'un formulaire</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <form id="f1" action="" method="post">
      <button id="v" type="submit" value="v">valider</button>
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (elm.length === undefined) {
                  elm.addEventListener(evt, function(e) {
                     fn(e);
                  }, false);
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].addEventListener(evt, function(e) {
                        fn(e);
                     }, false);
                  }
               }
            } else if (document.attachEvent) {
                if (elm.length === undefined) {
                    elm.attachEvent("on" + evt, fn);
                } else {
                    for (var i=0, imax=elm.length; i < imax; i++) {
                        elm[i].attachEvent("on" + evt, fn);
                    }
                }
            }
         }
      }
   }
   
   Utils.Evenement.ajouter(document.getElementById("f1"), "submit", function(e) {
      return false;
   });
   </script>
</body>
</html>

Si vous vous sentez inspiré, je vous en remercie d'avance.

**le_chomeur** · 22/12/2008, 16h13

ce n'est as tout a fais ça

le submit() envois le formulaire , il te faut donc récupérer cet évènement :

Code :

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

tonform.onsubmit = tafonction(){return false};

**franculo_caoulene** · 22/12/2008, 16h19

Je compte utiliser cette syntaxe au pire des cas. Mais c'est justement ça que je ne comprends pas, quelle est la différence entre ce que tu proposes et ce que je propose? Puisque ma fonction retourne bien false. Elle ne fait que ça justement!

C'est ça que je comprends pas.

**le_chomeur** · 22/12/2008, 16h21

et si tu fais ça :

Code :

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

1
2
3
 
 
 Utils.Evenement.ajouter(document.getElementById("f1"), "submit", return false);

**franculo_caoulene** · 22/12/2008, 16h25

"syntax error", puisque ce n'est pas une fonction.

**Bovino** · 22/12/2008, 16h33

Et avec :

Code :

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

1
2
3
Utils.Evenement.ajouter(document.getElementById("f1"), "submit", return function(e) {
      return false;
   });

**le_chomeur** · 22/12/2008, 16h38

ha vi , a tester

**franculo_caoulene** · 22/12/2008, 16h38

"syntax error", puisque ce n'est pas une fonction.

**Bovino** · 22/12/2008, 16h46

Ben oui, c'est la mauvaise approche... Effectivement, on ne peut pas mettre de return puisque :

"syntax error", puisque ce n'est pas une fonction.

Il faut passer par stopPropagation() / preventDefault() (FF) ou returnValue / cancelBubble (IE) pour stopper la propagation de l'événement !

**franculo_caoulene** · 22/12/2008, 16h50

C'est bon j'ai trouvé, enfin je crois :

Code xhtml :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>empêcher le rechargement de la page à la soumission d'un formulaire</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <form id="f1" action="" method="post">
      <button id="v" type="submit" value="v">valider</button>
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (elm.length === undefined) {
                  elm.addEventListener(evt, function(e) {
                     if (!fn(e)) e.preventDefault();
                  }, false);
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].addEventListener(evt, function(e) {
                        if (!fn(e)) e.preventDefault();
                     }, false);
                  }
               }
            } else if (document.attachEvent) {
                if (elm.length === undefined) {
                    var r = elm.attachEvent("on" + evt, fn);
                    return r;
                } else {
                    for (var i=0, imax=elm.length; i < imax; i++) {
                        var r = elm[i].attachEvent("on" + evt, fn);
                        return r;
                    }
                }
            }
         }
      }
   }
   
   Utils.Evenement.ajouter(document.getElementById("v"), "click", function(e){
      //return true;
      return false;
   });
   </script>
</body>
</html>

Pour IE je ne m'en faisais pas trop je connaissais déjà la solution. Pour les autres, il y a event.preventDefault().

Si vous voyez quelque chose qui cloche dites le moi quand même.

[edit] grillé deux fois dans la journée par Bovino...
[edit bis] merci à vous pour votre participation (ré)active

**le_chomeur** · 22/12/2008, 17h04

je ne connaissait pas preventDefault() mais bon a savoir...
étrange tout de même , as tu testé en direct comme je l'avais montré ?

Code :

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

tonform.onsubmit = tafonction(){return false};

car dans ce cas l'action est bien inhibée.

sinon pour info sur preventDefault() utilisation pour ie/FF

Code :

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

1
2
3
4
5
6
if (event.preventDefault) {
  event.preventDefault();
}
else{
event.returnValue = false;
}

bon courage

edit : grillé également sur l'utilisation ^^

**franculo_caoulene** · 22/12/2008, 17h06

Je me suis laissé emporter et n'avais pas vu un ancien test. Le preventDefault fonctionne pour le clique du bouton. Or, je souhaite agir à la soumission du formulaire (clique et touche entrée).

**franculo_caoulene** · 22/12/2008, 17h22

Je me suis résigné à utiliser ta syntaxe le_chomeur pour le moment, contraintes de production obligent.

Mais pour le moment, pour le moment!!! Je reviendrai... Ce n'est pas fini.

**Bovino** · 22/12/2008, 17h26

Code :

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

1
2
3
4
Utils.Evenement.ajouter(document.getElementById("v"), "click", function(e){
      //return true;
      return false;
   });

Tu as changé le 'submit' initial en 'click', je pense que si tu remets 'submit', cela fonctionnera aussi bien pour le clic du bouton que pour la touche entrée.

**franculo_caoulene** · 22/12/2008, 17h28

Envoyé par Bovino

Tu as changé le 'submit' initial en 'click', je pense que si tu remets 'submit', cela fonctionnera aussi bien pour le clic du bouton que pour la touche entrée.

Malheureusement non, preuve à l'appui :

Code xhtml :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>empêcher le rechargement de la page à la soumission d'un formulaire</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <form id="f1" action="" method="post">
      <input id="t" name="t" type="text" />
      <button id="v" type="submit" value="v">valider</button>
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (elm.length === undefined) {
                  elm.addEventListener(evt, function(e) {
                     if (!fn(e)) e.preventDefault();
                  }, false);
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].addEventListener(evt, function(e) {
                        if (!fn(e)) e.preventDefault();
                     }, false);
                  }
               }
            } else if (document.attachEvent) {
                if (elm.length === undefined) {
                    var r = elm.attachEvent("on" + evt, fn);
                    return r;
                } else {
                    for (var i=0, imax=elm.length; i < imax; i++) {
                        var r = elm[i].attachEvent("on" + evt, fn);
                        return r;
                    }
                }
            }
         }
      }
   }
   /*document.getElementById("f1").onsubmit = function() {
      return false;
   }*/
   Utils.Evenement.ajouter(document.getElementById("f1"), "submit", function(e){
      //return true;
      return false;
      //return 12;
   });
   </script>
</body>
</html>

**Bovino** · 22/12/2008, 17h29

Et avec :

Code :

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

1
2
3
4
5
Utils.Evenement.ajouter(document.forms["f1"], "submit", function(e){
      //return true;
      return false;
      //return 12;
   });

**franculo_caoulene** · 22/12/2008, 17h31

Comme dirait un certain ordinathan "Non, essaye encore"

**le_chomeur** · 22/12/2008, 19h15

lol
c pas gagné cette histoire ... après m'être plus amplement documenté , les listener d'évènement ne gère pas directent le onsubmit il gère le mousemove, mouse click etc mais pas le onsubmit il te faut donc adapter ta méthode et renvoyer false ( via la méthode que je t'ai donné

)

**franculo_caoulene** · 23/12/2008, 10h03

C'est pas adapter ça, c'est un échec (mais je l'ai déjà fait)... JQuery à l'air de gérer le submit, aux vues du code en tout cas, j'ai pas testé.

**Sub0** · 26/12/2008, 23h32

Bonsoir

Envoyé par franculo_caoulene

Je cherche à empêcher la soumission du formulaire. Il suffit normalement de rajouter un return false; après la fonction. Malheureusement, j'ai beau avoir fait plusieurs essais, la soumission se fait toujours.

Et en utilisant l'evènement onsubmit du formulaire ?

Code :

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

1
2
3
   <form id="f1" action="" method="post" onsubmit="return false;">
      <button id="v" type="submit" value="v">valider</button>
   </form>

Dans le onsubmit, tu peux appeller une fonction qui retourne true ou false selon si tu veux ou pas valider le formulaire, exemple :

Code :

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

1
2
3
4
5
6
7
8
   <script type="text/javascript">
   function testform(){
     return false;
   }
   </script>
   <form id="f1" action="" method="post" onsubmit="return testform();">
      <button id="v" type="submit" value="v">valider</button>
   </form>

Bon week-end!

addEventListener et submit

JavaScript

Discussions similaires

Partager

Partager