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

2

I have a% of image upload% where the user before doing an update on the avatar image or profile cover, he visualizes (in the same form) his registered image or a system default.

It turns out that my form has an "onchange" and my input type is with "onclick" ie my submit ends up being input submit and would like to hide it for while href is not selected, it is hidden and when file has a selected file this file is displayed to proceed with the 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>
    
asked by anonymous 24.04.2014 / 02:38

2 answers

2

Lauro, there are several options here, I always prefer to separate javascript and HTML so I do not have javascript inside HTML like 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 readURL() function since you did not put this 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();
});

Example online

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

    
24.04.2014 / 05:44
0

For you to manipulate an object, let it be a < a > or any other html object, when you think of manipulating it, you must assign a unique ID without repeating this object so that you can identify and execute commands on the object itself.

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 of the object as you quoted in your question can be done as follows:

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

The above command will remove the href from the indicated object

BONUS You can also manipulate the object in other ways than by the ID, such as by the NAME tag of the object, remembering that 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();
    
24.04.2014 / 03:26