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.