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

Asked

Viewed 1,579 times

2

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>

2 answers

2


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.

  • 1

    Intelligent use of the toggle() with the value of the input!

  • @Sergio your example is exactly what you were looking for but I couldn’t implement it?? In my script it calls a modal and readurl() another function that checks if input type file has some value if it does not have or show the database record or shows a default record (if tbm is not in the database). Since I couldn’t, I thought it might be a conflict with the codes already in the modal so I put your code on a bad clean page, but it still didn’t work. Hides the href link but does not show when I select an image?

  • @Lauromoraes, can you place your code on a page that I can see? on your website or on a jsFiddle? There is an error on the console?

  • [link]https://db.tt/vvA5lXRy

  • @Lauromoraes, ok. The problem is that the code is running before the HTML is run. Change my code into yours $(document).ready(function() { , so the code will run after the page has loaded.

  • @Sergio ran in the body at $(Document). ready(Function(){

  • @Sergio failed my >:( I passed firebug and I saw that the query.min.js of my directory had corrupted excerpt(s) Linkei the 1.9.1 and it worked well :) link to your code that upei and ta working [link]http://developer58.tk/demo/teste/cross.php and link to the project I’m trying to get a look at I’d like to use the code on the avatar editing profile page and cover [link]http://developer58.tk/demo/test/ Very Grateful for the help!!!

  • @Lauromoraes, great! If my answer solved your question you can click as accepted. See you soon!

Show 3 more comments

0

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();

Browser other questions tagged

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