Partage
  • Partager sur Facebook
  • Partager sur Twitter

Input file qui disparait après evenement js

Sujet résolu
    9 juin 2021 à 22:20:15

    Bonjour, je suis en train de styliser un input file en js et dès lorsque je met un évènement sur l'input file (click, change...) et que l’événement "se produit", l'input disparait par magie. J'ai supprimé l'event pour voir si ça venait bien de là et en effet c'est la source du problème ...

    Quelqu'un sait-il comment empêcher cette disparition ?

    Merci

    • Partager sur Facebook
    • Partager sur Twitter
      9 juin 2021 à 22:22:16

      Bonjour,

      sans ton code, difficile de dire :) poste ici ton HTML et ton JS, colorés à l'aide du bouton </>.

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        10 juin 2021 à 17:58:34

        Voici donc le code: 

        <form class="form" method="POST" enctype="multipart/form-data">
        <h3 class="form-title">Nouvel Article</h3>
        <input id="title" type="text" placeholder="Title" name="title" required=""/>
        <input id="author" type="text" placeholder="Author" name="author"/>

        <div class="file-box">
        <label class="label-file">file</span>
        <input type=file class="input-file" name="image" accept="image/*"> <!-- accepte tout les formats image (pour préciser, remplacer étoile par ext)-->
        </div>

        <div class="textarea">
        <textarea id="content" name="content" placeholder="Content"></textarea>
        </div>
        <button id="submit-btn">Submit</button>
        </form>

        var input_label = document.querySelector(".label-file");
        var input = document.querySelector(".input-file");
        var file_box = document.querySelector(".file-box");
        
            input.addEventListener("change", function(){
                
                file_box = file_box.classList.add("active-path");
                var name = input.value.split(/(\\|\/)/g).pop()
                input_label.innerHTML = name;
                
            })


        • Partager sur Facebook
        • Partager sur Twitter
          10 juin 2021 à 18:40:22

          Tu fermes ton <label> avec un </span>, donc il continue et englobe ton input. Ensuite, quand tu modifies le contenu du label, tout est écrasé.
          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

            10 juin 2021 à 19:08:56

            Oulah grosse erreur de ma part

            Ça fonctionne donc avec cette correction merci beaucoup

            • Partager sur Facebook
            • Partager sur Twitter
              10 juin 2021 à 19:14:07

              J'oubliais : pense à donner un id à ton input, et à mettre la même valeur dans l'attribut "for" du label, comme ça un clic sur le label permettra de déclencher l'input.
              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

              Input file qui disparait après evenement js

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown