show gravatar in div after email input

Question

What I want to do is "ones a user is finished typing his/her e-mail and has moved to password field or just finished typing e-mail, to have jquery load the users gravatar based on the e-mail that was inserted on the login page and load this image into the div that contains temporary no-image image."

How can I do this with jQuery

Answer 1

No HTML given

<input id="email" ... /><img id="gravatar" style="display:none;"/>

It doesn't need ajax as someone suggested because the gravatar call is very simple.

jQuery

$('#email').on('change', function(){
    var hash=md5($('#email').val()); // you will need to find a javascript md5 function
    $('#gravatar').attr('src', 'http://www.gravatar.com/avatar/' + hash).show();
});

I haven't bothered to preload the image.

"or just finished typing e-mail" - if you want to do this you would throw in an email address validation function and check on keyup too.

$('#email').on('keyup change', function(){
    if (is_email_address($(this).val()){
        var hash=md5($('#email').val()); // you will need to find a javascript md5 function
        $('#gravatar').attr('src', 'http://www.gravatar.com/avatar/' + hash).show();
    }
});