JS: show textarea field on input change

Question

I've a form that should show a textarea when usr uploads a file.

I need to show a textarea field if user uploads an imagen, in an image field. However, actually my code does not do that, even provided that the javascript is inside the html.

Here is the CODEPEN for this:

https://codepen.io/ogonzales/pen/GPZBjL

I've this JS, but does not recognize when user uploads a file, what should I change on my code?

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

html:

<div class="row padding80-top">

  <div class="col-md-3 mb-4"></div>
  <div class="col-md-6 mb-4">
     <p class="text-size60 bold-font">Sube tu imagen</p>
     <form method="POST" enctype="multipart/form-data" action="">
        <input type="hidden" name="csrfmiddlewaretoken" value="feLAxC4KQTvAL532BafNKadPOsGOq1OTwLCS6GNReJ3z7lXvIhDRUOE0s0dsnkjU">

          <div class="form-group">


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

            <label for="id_image" class="col-form-label ">
                Image
            </label>


          <div class="">
              <input type="file" name="image" accept="image/*" class="clearablefileinput" id="id_image">
           </div>
    </div>
    <div id="instrucciones-adicionales"  style="display:none">

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

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

      <label for="id_comment" class="col-form-label ">
                Comment
      </label>

    <div class="">
       <textarea name="comment" cols="40" rows="10" class="textarea form-control" id="id_comment">
</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>

UPDATE 1 :

The problem was that the call to the JQUery was at the bottom, before body closing tag.

What should I change in my code, so keeping the call to Jquery at the bottom, it shows the textarea field when user uploads image?

Answer 1

You don't have jQuery enabled on your pen. You need to add it by hitting the cog icon at the top of the JS pane, and adding it there.

Even in Codepen, you can use the developer console of your browser to see what errors are being generated by your code. In this case, you would see:

Uncaught ReferenceError: $ is not defined

This tells you that jQuery is not being loaded.