How to add class when adding file

Asked

Viewed 32 times

1

I want to add an ok icon when the person adds a photo in the form, to show her that the photo was added, the problem is that I have an image that I should follow and then the file name does not appear, I want to make it easy for the user to know that the photo has been added successfully and he can submit the form.

<p>Selecione sua FOTO</p>
   <label for="photo">
   <input type="file" name="photo" id="photo" style="filter:alpha(opacity=0); -moz-opacity:0; opacity:0;">
   <p class="icon-ok" id="iconeOk"></p>


<script>
$(function(){
if($("input:file")!=null){
        $('.icone-ok').addClass();
    }
});
</script>
javascript

1 answer

1


The problem with your code is that it doesn’t add any class to the p, it only rotates once during page loading.

You need to watch the element change. Your Javascript should be something like this:

$("input:file").on('change', function() {
  $("#iconeOk").addClass("icon-ok")
})

Jsbin

  • +1 It should be remembered that in HTML the element #iconeOk should initially be without the class icon-ok (or: each time the form is reset - if applicable - this class must start away).

  • 1

    It worked, thank you so much for your help.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.