Discussion :

[comme de bien entendu]

Bonjour,
Je souhaite visualiser le contenu d'un fichier csv et n'aller sur la page PHP que si la visualisation a permis de valider l'import (au moins à l'oeil de l'utilisateur)
Le problème est que je ne parviens pas à bloquer l'envoi de mon formulaire vers la page ḦHP alors que je suis encore dans une phase de visualisation du fichier.
Normalement je dois pouvoir utiliser les fonctions

Code :

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

1
2
event.preventDefault();
event.stopPropagation();

pour éviter l'envoi direct vers la page suivante.
J'ai bien essayé le code suivant au démarrage de mon script pour bloquer l'envoi du formulaire mais cela ne fonctionne pas, du coup je passe directement dans la page PHP,

Code :

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

1
2
3
4
5
6
7
8
9
10
(function(){
 
            window.addEventListener('load', function() {
            var LireLeFichier = document.getElementById("VisualiseFichier");
            LireLeFichier.addEventListener('submit', function(event) {
                event.preventDefault();
                event.stopPropagation();
              });
            })
          })();

avec le HTML suivant

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
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
<form role="form" method="post" action="Validation_Integration_Donnees.php" enctype="multipart/form-data">
    <div class="form-row">
        <div class="col-xs-8">
          <table class="table table-striped table-hover  scroll">
              <thead>
                <tr>
                  <th>Date de vente</th>
                  <th>Produit</th>
                  <th>Type de produit</th>
                  <th>Nombre de produit</th>
                  <th>Nom Client</th>
                  <th>Prénom Client</th>
                  <th>Téléphone Client</th>
                </tr>
            </thead>
            <tbody id="tableau" overflow-y: auto;>
            </tbody>
 
            </table>
          <div class="w-40">
            <div class="col-xs-8">
              <label for="NomClient"></label>
              <input type="file" style="width:80%" name="FileToUpload" class="form-control" id="FileToUpload" required>
            </div>
 
            <div  id="GroupeSeparateur" class="col-xs-8">
              <label for="nom">Spécifiez le séparateur</label>
                <select name="Separateur" class="custom-select mr-sm-2" id="sel-separateur">
                  <option selected>Choisissez...</option>
                  <option value=",">Virgule</option>
                  <option value=";">Point virgule</option>
                  <option value="\t">Tabulation</option>
                </select>
           </div>
         </div>
         <div class="form-row">
           <div class="col-xs-8">
 
          </div>
        </div>
      </div>
      </br>
    <button id="VisualiseFichier"   type="submit"  class="btn btn-success pull-right">Visualiser le fichier</button>
    <div class="col-xs-8">
      <button id="RAZ"   type="submit" class="btn btn-success pull-right"> Changer de fichier </button>
    </div>
    </br>
    <div id="MiseEnPlaceFormulaire">
        <button  name="FileToUpload"   id="FinaliserIntégration" type="file" class="btn btn-success pull-right">Tntégrez ces clients dans votre logiciel.</button>
    </div>
    </div>
  </form>

Merci d'avance de votre retour.

[tag9724]

L'évènement submit ne fonctionne que sur les éléments <form>
https://developer.mozilla.org/fr/doc...t/submit_event

Il faut donc que ton element.addEventListener("submit", [...]) se fasse sur l'élément form et non sur le button

[comme de bien entendu]

Super, cela marche. Par contre si je veux ensuite rétablir le fonctionnement normal ? (pour que le formulaire soit transmis)
Merci d'avance.

[tag9724]

Tu veux dire retirer l'évènement ? Oui c'est parfaitement possible dans ton cas avec removeEventListener

En gros ça ressembleras a ça

Code :

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

1
2
3
4
5
6
7
8
const form = document.getElementById("leFormulaire")
 
const onSubmitEvent = (event) => {
  event.preventDefault()
  form.removeEventListener("submit", onSubmitEvent)
}
 
form.addEventListener("submit", onSubmitEvent)

Ou encore alternativement

Code :

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

1
2
3
4
5
6
const form = document.getElementById("leFormulaire");
 
form.onsubmit = (event) => {
  event.preventDefault()
  form.onsubmit = null
};

[comme de bien entendu]

non, merci bien mais ma question ce serait plutôt pour réactiver l'événement permettant de transmettre le formulaire par la méthode POST, lorsque l'utilisateur est certain de ce qu'il envoie.

[tag9724]

De ce que tu as envoyer tu créer un formulaire en HTML puis bloque l'envoie du formulaire avec un évènement en javascript, ce qui fait qu'en retirant cet événement bloquant ton formulaire refonctionne normalement ( sans code javascript qui interfère donc ).

Je t’ai fait un exemple ici https://jsfiddle.net/h18sd4xu/1/

[comme de bien entendu]

Bonjour, et si on veut qu'il y ait un deuxieme bouton pour afficher le fichier avant de déclencher le Formulaire, comment faire ?

[tag9724]

Pour ça il y as bien plusieurs façons de faire a toi de voir quel méthode sera la plus adaptée a tes besoins.
Je t'ais fait un autre exemple du coup : https://jsfiddle.net/67jykd2f/1/

[comme de bien entendu]

Bonjour, cela semble sympa comme technique mais lorsque je veux mettre cela en place, j'ai cette erreur là.

et j'ai bien idendifié le formulaire avec cela au dessus

Code :

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

const form = document.getElementById("leFormulaire")

sur d'autres essais j'ai pu comprendre qu'il ne voulait pas du

Code :

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

form.onsubmit=null;

[tag9724]

L'erreur que tu as signifie que la variable form est égale a null, ça arrive quand on essaye de sélectionner un élément dans la page qui n'existe pas ou qui n'existe pas encore au moment d'exécuter le code en javascript.

Si dans ton code HTML tu place ta balise <script> avant ta balise <form> ton sélecteur te renverras systématiquement null, il faudra donc soit placer ton code en JS après ton formulaire ou utiliser un événements en JS DOMContentLoaded

Il est aussi possible qu'une faute de frappe se soit glissée dans ton code HTML, document.getElementById() étant sensible à la casse une simple majuscule manquante peux causer le problème.

[comme de bien entendu]

Hello, j'ai scanné tout mon code simplifié et j'ai encore cette erreur dans l'interface

"cannot set property on submit of null"

Est ce que tu aurais la même erreur avec le code...

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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
 
<html lang="en">
 
**<head>
 
****<!-- Required meta tags -->
 
****<meta charset="utf-8">
 
****<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
****<!-- Bootstrap CSS -->
 
****<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="StyleCSS/tableau.css" >
 
****<title>De nouveaux liens.</title>
 
**</head>
 
**<body>
 
<div class="container">
  <form role="form" id="LeFormulaire" method="post" action="Validation_Integration_Donnees.php" enctype="multipart/form-data">
      <h4>Vous allez pouvoir intégrer ci-dessous, via un fichier texte, les nouveaux produits commandés à votre entreprise... </h4>
        <center><h5>Voici la liste des champs que votre fichier doit contenir</h5></center>
          <div class="form-row">
            <div class="col-xs-8">
              <table class="table table-striped table-hover  scroll">
                <thead>
                <tr>
                  <th>Date de vente</th>
                  <th>Produit</th>
                  <th>Type de produit</th>
                  <th>Nombre de produit</th>
                  <th>Nom Client</th>
                  <th>Prénom Client</th>
                  <th>Téléphone Client</th>
                </tr>
            </thead>
            <tbody id="tableau" overflow-y: auto;>
            </tbody>
 
            </table>
          <div class="w-40">
            <!-- Recuparation du fichier -->
            <div class="col-xs-8">
              <label for="NomClient"></label>
              <input type="file" style="width:80%" name="FileToUpload" class="form-control" id="FileToUpload" required>
            </div>
 
            <div  id="GroupeSeparateur" class="col-xs-8">
              <label for="nom">Spécifiez le séparateur</label>
                <select name="Separateur" class="custom-select mr-sm-2" id="sel-separateur">
                  <option selected>Choisissez...</option>
                  <option value=",">Virgule</option>
                  <option value=";">Point virgule</option>
                  <option value="\t">Tabulation</option>
                </select>
           </div>
         </div>
         <div class="form-row">
           <div class="col-xs-8">
    <!--      <br/>
            <button id="IntegrationFichier" type="submit" class="btn btn-success pull-right">Visualiser le fichier</button>
        </div>  -->
          </div>
        </div>
      </div>
      </br>
 
<!-- type="submit" -->
    <button id="VisualiseFichier"   type="reset"  class="btn btn-success pull-right">Visualiser le fichier</button>
<!-- type="submit" -->
    <div class="col-xs-8">
      <button id="RAZ"   type="submit" class="btn btn-success pull-right"> Changer de fichier </button>
    </div>
    </br>
      <div id="MiseEnPlaceFormulaire">
          <button  type="submit" name="FileToUpload"   id="FinaliserIntégration" type="file" class="btn btn-success pull-right">Tntégrez ces clients dans votre logiciel.</button>
      </div>
    </form>
  </div>
 
 
<script>
 
 
        var RevenirAuDebut = document.getElementById("RAZ");
        RevenirAuDebut.addEventListener('click', RedirectionJavascript);
 
        var IntegrationClients = document.getElementById("FinaliserIntégration");
        var LireLeFichier = document.getElementById("VisualiseFichier");
        var RevenirAuDebut = document.getElementById("RAZ");
        var fileInput = document.getElementById("FileToUpload");
 
              readFile = function () {
                 // event.preventDefault();
                  var reader = new FileReader();
                  reader.onload = function () {
                      var Separator = document.getElementById("sel-separateur").selectedIndex;
                      var leSeparateur =document.getElementsByTagName("option")[Separator].value;
                      //alert(leSeparateur);
 
                      var fileInput = document.getElementById("FileToUpload");
                      const BlocSeparateur = document.getElementById("GroupeSeparateur");
 
                      const ListeDonnees =reader.result;
                      var monTab = ListeDonnees.split('\n');
                      console.log(monTab[1]);
                      var tableau = document.getElementById("tableau");
                      for (var i=0;i<monTab.length;i++)
                      {
                          var ligne = tableau.insertRow(-1)
                          var UneLigneTab=monTab[i].split(leSeparateur);
                          //
                          var colonne1 = ligne.insertCell(0);
                          colonne1.innerHTML += UneLigneTab[0];
                          //
                          var colonne2 = ligne.insertCell(1);
                          colonne2.innerHTML += UneLigneTab[1];
                          //
                          var colonne3 = ligne.insertCell(1);
                          colonne3.innerHTML += UneLigneTab[2];
                          //
                          var colonne4 = ligne.insertCell(1);
                          colonne4.innerHTML += UneLigneTab[3];
                          //
                          var colonne5 = ligne.insertCell(1);
                          colonne5.innerHTML += UneLigneTab[4];
 
                      }
                  };
                  //start reading the file. When it is done, calls the onload event defined above.
                  reader.readAsBinaryString(fileInput.files[0])
                  RevenirAuDebut.style.display="block";
                  LireLeFichier.style.display="none";
                  //IntegrationClients.style.display="block";
                  fileInput.style.display="none";
            //      $("#MiseEnPlaceFormulaire").html('<form role="form" method="post" action="Validation_Integration_Donnees.php" enctype="multipart/form-data"><button  name="FileToUpload"   id="FinaliserIntégration" type="file" class="btn btn-success pull-right">Tntégrez ces clients dans votre logiciel.</button></form> ')
                  const FormulaireDIntegration = document.getElementById("FinaliserIntégration");
                  FormulaireDIntegration.style.display="block";
 
 
              };
 
              var LireLeFichier = document.getElementById("VisualiseFichier");
              LireLeFichier.addEventListener('click', readFile);
 
              function RedirectionJavascript(){
                 document.location.href="http://localhost/tests/Conception/Caneva2.html";
                 }
 
              const UnForm = document.getElementById("leFormulaire");
 
              const onSubmitEvent = (event) => {
              // Bloque l'envoie du formulaire
              event.preventDefault();
              togglePreview(true);
              }
 
              const togglePreview = (enable = false) => {
              // Ajoute ou supprime l'évenement bloquant
              if (enable) UnForm.onsubmit = null
              else UnForm.onsubmit = onSubmitEvent;
 
              }
 
            UnForm.onsubmit = onSubmitEvent;
            UnForm.onreset = () => togglePreview(false);
 
       }*
 
        
 
 
           </script>
 
****<!-- Optional JavaScript -->
 
****<!-- jQuery first, then Popper.js, then Bootstrap JS -->
 
****<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 
****<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 
****<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
**</body>
 
</html>

[tag9724]

Tu as écrit const UnForm = document.getElementById("leFormulaire"); sauf que l'attribut id de la balise form commence la une majuscule <form role="form" id="LeFormulaire" ...>, il faudra donc écrire :

Code :

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

const UnForm = document.getElementById("LeFormulaire");

Je ne sais pas trop pourquoi il y a des * partout dans ton code mais dans tout les cas attention à la dernière ligne de code ( ligne 176 ) }*, elle provoquera une erreur.

[comme de bien entendu]

Merci bien, j'ai fait confiance à Atom pour la reconnaissance et j'ai rien vu. J'aurais mieux fait de rester couché.