addEventListener et submit

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

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, 17h13

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, 17h19

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, 17h21

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, 17h25

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

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

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

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

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

**Sub0** · 27/12/2008, 00h32

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

Vue hybride

Discussions similaires

Partager

Partager