Transmission d'un fichier dans un formulaire après visualisation
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:
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:
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:
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.
