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/