JQuery: need to hide div if input file is empty

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>

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

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

– Randy Casburn
Nov 20 '18 at 1:37

add a comment |

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>

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

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

– Randy Casburn
Nov 20 '18 at 1:37

add a comment |

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>

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

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>

javascript jquery

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

asked Nov 20 '18 at 1:34

Omar Gonzales

58521440

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

– Randy Casburn
Nov 20 '18 at 1:37

add a comment |

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

– Randy Casburn
Nov 20 '18 at 1:37

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

– Randy Casburn
Nov 20 '18 at 1:37

add a comment |

1 Answer
1

active

oldest

votes

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 '18 at 1:45

answered Nov 20 '18 at 1:38

Dekel

43k54667

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.

– Omar Gonzales
Nov 20 '18 at 1:43

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

– Dekel
Nov 20 '18 at 1:45

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.

– Omar Gonzales
Nov 20 '18 at 1:53

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

– Dekel
Nov 20 '18 at 1:54

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

– Omar Gonzales
Nov 20 '18 at 2:14

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385006%2fjquery-need-to-hide-div-if-input-file-is-empty%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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 '18 at 1:45

answered Nov 20 '18 at 1:38

Dekel

43k54667

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.

– Omar Gonzales
Nov 20 '18 at 1:43

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

– Dekel
Nov 20 '18 at 1:45

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.

– Omar Gonzales
Nov 20 '18 at 1:53

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

– Dekel
Nov 20 '18 at 1:54

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

– Omar Gonzales
Nov 20 '18 at 2:14

add a comment |

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 '18 at 1:45

answered Nov 20 '18 at 1:38

Dekel

43k54667

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.

– Omar Gonzales
Nov 20 '18 at 1:43

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

– Dekel
Nov 20 '18 at 1:45

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.

– Omar Gonzales
Nov 20 '18 at 1:53

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

– Dekel
Nov 20 '18 at 1:54

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

– Omar Gonzales
Nov 20 '18 at 2:14

add a comment |

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 '18 at 1:45

answered Nov 20 '18 at 1:38

Dekel

43k54667

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>

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>

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 '18 at 1:45

answered Nov 20 '18 at 1:38

Dekel

43k54667

edited Nov 20 '18 at 1:45

answered Nov 20 '18 at 1:38

Dekel

43k54667

answered Nov 20 '18 at 1:38

Dekel

43k54667

answered Nov 20 '18 at 1:38

Dekel

43k54667

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.

– Omar Gonzales
Nov 20 '18 at 1:43

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

– Dekel
Nov 20 '18 at 1:45

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.

– Omar Gonzales
Nov 20 '18 at 1:53

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

– Dekel
Nov 20 '18 at 1:54

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

– Omar Gonzales
Nov 20 '18 at 2:14

add a comment |

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.

– Omar Gonzales
Nov 20 '18 at 1:43

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

– Dekel
Nov 20 '18 at 1:45

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.

– Omar Gonzales
Nov 20 '18 at 1:53

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

– Dekel
Nov 20 '18 at 1:54

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

– Omar Gonzales
Nov 20 '18 at 2:14

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.

– Omar Gonzales
Nov 20 '18 at 1:43

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

– Dekel
Nov 20 '18 at 1:45

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.

– Omar Gonzales
Nov 20 '18 at 1:53

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

– Dekel
Nov 20 '18 at 1:54

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

– Omar Gonzales
Nov 20 '18 at 2:14

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk