addEventListener et submit

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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.

22/12/2008, 16h13
le_chomeur

ce n'est as tout a fais ça :)
le submit() envois le formulaire , il te faut donc récupérer cet évènement :

Code:

tonform.onsubmit = tafonction(){return false};
22/12/2008, 16h19
franculo_caoulene

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.

et si tu fais ça :

Code:

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

22/12/2008, 16h25
franculo_caoulene

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

Et avec :

Code:

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

22/12/2008, 16h38
le_chomeur

ha vi , a tester :)
22/12/2008, 16h38
franculo_caoulene

"syntax error", puisque ce n'est pas une fonction.
22/12/2008, 16h46
Bovino

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

Citation:

"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 !

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

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

22/12/2008, 17h04
le_chomeur
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:

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:

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

edit : grillé également sur l'utilisation ^^
22/12/2008, 17h06
franculo_caoulene

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).
22/12/2008, 17h22
franculo_caoulene

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.
22/12/2008, 17h26
Bovino
Code:

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.

Citation:

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:

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>

Et avec :

Code:

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

22/12/2008, 17h31
franculo_caoulene

Comme dirait un certain ordinathan "Non, essaye encore"
22/12/2008, 19h15
le_chomeur

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é :) )
23/12/2008, 10h03
franculo_caoulene

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

Bonsoir

Citation:

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:

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:

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

Voir 40 message(s) de cette discussion en une page