JQuery: need to hide div if input file is empty

Question

I need to hide a div for aditional coments if the input file is empty.

I don't mind if it's done with Jquery or plain Javascript.

I've used JQuery, I know that it's been called correctly because my alert pops up, but my function does not hide the div with ID: #instrucciones-adicionales and all its contents.

HTML:

            <script>
                alert( "Animation complete." );
                $(function () {
                    $("input:file").change(function () {
                        var fileName = $(this).val();
                        if (filename != "") {
                            $("#instrucciones-adicionales").hide();
                        } //show the button
                    });
                });
            </script>


    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">

    <div class="form-group">

       <div id="div_id_imagenes" class="form-group">

            <label for="id_imagenes" class="col-form-label  requiredField">
                Imagenes<span class="asteriskField">*</span>
            </label>


                <div class="">
                    <input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">

                </div>


    </div>

      <div id="instrucciones-adicionales">

           <p class="bold-font"> Instrucciones adicionales (opcional):</p>


   <div id="div_id_instrucciones" class="form-group">
      <label for="id_instrucciones" class="col-form-label  requiredField">
                    Instrucciones<span class="asteriskField">*</span>
                </label>




       <div class="">
           <textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
    </textarea>


    </div>


 </div>





  </div>
 </div>


 </br>
 </br>

 <p>O, sáltate este paso y envía tu arte por correo electrónico</p>


  <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
                        </button>

What do you think this means? filename != ""

Randy Casburn
– Randy Casburn

2018-11-20 01:37:15 +00:00
Commented Nov 20, 2018 at 1:37 — Randy Casburn
– Randy Casburn, Commented Nov 20, 2018 at 1:37

Dekel · Accepted Answer · 2018-11-20 01:45:40Z

1

You had a typo (variables are case sensitive - fileName !== filename).
I added the show part:

alert( "Animation complete." );
$(function () {
    $("input:file").change(function () {
        var fileName = $(this).val();
        if (fileName != "") {
            $("#instrucciones-adicionales").hide();
        } else {
            $("#instrucciones-adicionales").show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">


    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">

    <div class="form-group">

       <div id="div_id_imagenes" class="form-group">

            <label for="id_imagenes" class="col-form-label  requiredField">
                Imagenes<span class="asteriskField">*</span>
            </label>


                <div class="">
                    <input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">

                </div>


    </div>

      <div id="instrucciones-adicionales" style="display: none">

           <p class="bold-font"> Instrucciones adicionales (opcional):</p>


   <div id="div_id_instrucciones" class="form-group">
      <label for="id_instrucciones" class="col-form-label  requiredField">
                    Instrucciones<span class="asteriskField">*</span>
                </label>




       <div class="">
           <textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
    </textarea>


    </div>


 </div>





  </div>
 </div>


                        </br>
                        </br>

                        <p>O, sáltate este paso y envía tu arte por correo electrónico</p>


                        <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
                        </button>


                    </form>

</main>

edited Nov 20, 2018 at 1:45

answered Nov 20, 2018 at 1:38

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Omar Gonzales Over a year ago

ty, but still seeing the div when loading the page. I need it to be hidden at the begging and to show when file is uploaded.

Dekel Over a year ago

Not your original question, but you can hide it using style="display: none". Check the update on the answer.

Omar Gonzales Over a year ago

That hides the div, but after uploading a file the div does not appear. I need it to hide and the beggining but to show when user uploads a file.

Dekel Over a year ago

You are keep changing what you are looking all the time... it doesn't really work this way.

Omar Gonzales Over a year ago

sorry for the confusion. The title says: "need to hide div if input file is empty". So the first action should be to show and then to hide in the if else condition. Div must have stile hidden for this to work. ty

Collectives™ on Stack Overflow

JQuery: need to hide div if input file is empty

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related