How to hide href with jQuery while input file is not selected?

Question

I have a form image upload where the user before updating the avatar image or profile cover, views (in this same form) their registered image or a system pattern.

Turns out my input type has an "onchange" and mine input submit is with "onclick" IE, my Submit ends up being a href and would like to give him a "Hide" for while the file is not selected, it is hidden and when file have a file selected this href is displayed to perform upload request.

Follow my form:

<form id="up_cover">
  <input type="file" onchange="readURL(this);">
  <a href="javascript:; onclick=document.getElementById(up_cover).submit();">
    Atualizar
  </a>
  <input type="hidden" name="update_cover_user">
</form>

Answer 1

Lauro, there are several options here, I always prefer to separate javascript and HTML to not have javascript inside HTML as in this case <a href="javascript:; onclick=document.getElementById(up_cover).submit();">. This is relatively simple and leaves the code cleaner.

Following this principle here is a revised version without knowing exactly what makes the function readURL() once you didn’t put that code.

HTML (without javascript):

<form id="up_cover">
    <input type="file" /> 
    <a href="#" class="atualizar" style="display: none;">
        Atualizar
    </a>
    <input type="hidden" name="update_cover_user" />
</form>

Javascript (with jQuery):

$('#up_cover input[type=file]').on('change', function () {
    $(this).next('a.atualizar').toggle(this.value); 
    readURL(this);
});

$('#up_cover a.atualizar').on('click', function (e) {
    e.preventDefault();
    $(this).closest('form').submit();
});

Online example

In the first part of the code I use the .toggle() to hide or show the link if a file is chosen or not. In the second part of the code, <form> in which the <a> is inserted and submit. This way your code becomes more flexible and can only have this code for different Forms (or parts of it), without having to go line by line in HTML add javascript.

Answer 2

For you to manipulate an object, be it a < a > link or any other html object, when you think about manipulating you must assign a single ID without repetition to that object so you can identify it and execute.

To hide an object in jQuery you use the following command:

$('#ID_ATRIBUTO').hide();

To display the object you use the following command:

$('#ID_OBJETO').show();

To remove an attribute from the object as you quoted in your question can be done as follows:

$('#ID_OBJETO).removeAttr('href');

The above command will remove href from the specified object

BONUS It is also possible to manipulate the object in other ways than by the ID, for example by the NAME tag of the object, remembering that in doing so, all objects that have the same name will receive the applied commands.

Example (using the name of your question object):

//esconde o objeto
$('a[name=update_cover_user]').hide();
//exibe o objeto
$('a[name=update_cover_user]').show();