IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre habitué
    Inscrit en
    janvier 2003
    Messages
    510
    Détails du profil
    Informations forums :
    Inscription : janvier 2003
    Messages : 510
    Points : 196
    Points
    196
    Par défaut 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 : 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.

  2. #2
    Membre du Club Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2021
    Messages : 31
    Points : 58
    Points
    58
    Par défaut
    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

  3. #3
    Membre habitué
    Inscrit en
    janvier 2003
    Messages
    510
    Détails du profil
    Informations forums :
    Inscription : janvier 2003
    Messages : 510
    Points : 196
    Points
    196
    Par défaut
    Super, cela marche. Par contre si je veux ensuite rétablir le fonctionnement normal ? (pour que le formulaire soit transmis)
    Merci d'avance.

  4. #4
    Membre du Club Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2021
    Messages : 31
    Points : 58
    Points
    58
    Par défaut
    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
    };

  5. #5
    Membre habitué
    Inscrit en
    janvier 2003
    Messages
    510
    Détails du profil
    Informations forums :
    Inscription : janvier 2003
    Messages : 510
    Points : 196
    Points
    196
    Par défaut
    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.

  6. #6
    Membre du Club Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2021
    Messages : 31
    Points : 58
    Points
    58
    Par défaut
    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/

  7. #7
    Membre habitué
    Inscrit en
    janvier 2003
    Messages
    510
    Détails du profil
    Informations forums :
    Inscription : janvier 2003
    Messages : 510
    Points : 196
    Points
    196
    Par défaut
    Bonjour, et si on veut qu'il y ait un deuxieme bouton pour afficher le fichier avant de déclencher le Formulaire, comment faire ?

    Nom : AvecUnDeuxiemeBouton.png
Affichages : 34
Taille : 117,2 Ko

  8. #8
    Membre du Club Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2021
    Messages : 31
    Points : 58
    Points
    58
    Par défaut
    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/

  9. #9
    Membre habitué
    Inscrit en
    janvier 2003
    Messages
    510
    Détails du profil
    Informations forums :
    Inscription : janvier 2003
    Messages : 510
    Points : 196
    Points
    196
    Par défaut
    Bonjour, cela semble sympa comme technique mais lorsque je veux mettre cela en place, j'ai cette erreur là.
    Nom : ErreurDebugageFormNull.jpg
Affichages : 33
Taille : 30,8 Ko
    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

  10. #10
    Membre du Club Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2021
    Messages : 31
    Points : 58
    Points
    58
    Par défaut
    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.

  11. #11
    Membre habitué
    Inscrit en
    janvier 2003
    Messages
    510
    Détails du profil
    Informations forums :
    Inscription : janvier 2003
    Messages : 510
    Points : 196
    Points
    196
    Par défaut
    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>

  12. #12
    Membre du Club Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2021
    Messages : 31
    Points : 58
    Points
    58
    Par défaut
    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.

  13. #13
    Membre habitué
    Inscrit en
    janvier 2003
    Messages
    510
    Détails du profil
    Informations forums :
    Inscription : janvier 2003
    Messages : 510
    Points : 196
    Points
    196
    Par défaut
    Merci bien, j'ai fait confiance à Atom pour la reconnaissance et j'ai rien vu. J'aurais mieux fait de rester couché.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 18/11/2008, 21h42
  2. Réponses: 4
    Dernier message: 05/11/2008, 21h17
  3. Souligner les mots dans les documents après une recherche
    Par Watier_53 dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 27/06/2008, 10h50
  4. Effacer des données dans un formulaire après une recherche
    Par PFX dans le forum Requêtes et SQL.
    Réponses: 0
    Dernier message: 09/01/2008, 11h00
  5. Fichier dans un champ d'une table
    Par BOUBOU81 dans le forum MS SQL Server
    Réponses: 6
    Dernier message: 09/10/2006, 17h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo