jQuery mailto with anchor element

Question

I tried this with umpteen examples we see on the net. But I guess there is none that is simple and works on all browsers (IE 8 and above as well).

I am trying to simply open up Outlook window with mailto link.

<a href="#" name="emailLink" id="emailLink">Email</a>

JQuery:

$(function () {
  $('#emailLink').on('click', function (event) {
    alert("Huh");
    var email = '[email protected]';
    var subject = 'Circle Around';
    var emailBody = 'Some blah';
    window.location = 'mailto:' + email + '?subject=' + subject + '&body=' +   emailBody;
  });
});

Granted, I am a jQuery newbie. The above just doesn't work. It just flickers the browser but nothing opens. I guess this is because of window.location.

Is there a simple solution? I want this to work in IE8 & above and in all browsers.

The body is generated automatically (in JSP).

Quaff

href is spelled wrong. also you select by id but the tag has no id – Ineslta

#emailLink means id="emailLink". in your case it will be [name=emailLink] jsfiddle.net/cwa3454s – Granvillegranvillebarker

You also need a comma after 'click' and before function – Despinadespise

Thanks guys. I updated it with all the fixes. – Quaff

here's a working version of your script jsfiddle.net/97ap11cu – Jannjanna

This seems to work. But does it work in IE8 (and above)? I will check anyway. – Quaff

@Jannjanna this works in FF too. But it refreshes the page, which should be avoided. Anything else I can change to prevent that? – Quaff

@KevinRave, you can use event.preventDefault(); in your function. here's e.g jsfiddle.net/97ap11cu/2 – Jannjanna

does this work in all browsers? (IE8 and above a swell)? – Quaff

@Jannjanna It works in IE8.. Please put this as answer. I will accept it. – Quaff

Answer 1

here's working solution:

<a href="#" name="emailLink" id="emailLink">Email</a>

and the function:

$(function () {
  $('#emailLink').on('click', function (event) {
      event.preventDefault();
    alert("Huh");
    var email = '[email protected]';
    var subject = 'Circle Around';
    var emailBody = 'Some blah';
    window.location = 'mailto:' + email + '?subject=' + subject + '&body=' +   emailBody;
  });
});

Jannjanna

Don't you need to escape special characters in email, subject and emailBody? What if I want to send text Bob & Alice are friends to e-mail john+doe@艺龙.中国? – Cytochrome

Answer 2

If you do not need the address as a text anywhere on the website I would suggest this:

$('a[data-mail]').on('click', function() {
   window.location = 'mailto:' + $(this).data('mail')+'@yourdomain.net' + '?subject=Spotflow';
});

The link woud look like this:

<a href="#" data-mail="max">Send me a mail</a>

No chance for bots!

Sig

Answer 3

$(function () {
  $('[name=emailLink]').click(function () {
    var email = '[email protected]';
    var subject = 'Circle Around';
    var emailBody = 'Some blah';
    $(this).attr('href', 'mailto:' + email +
           '?subject=' + subject + '&body=' +   emailBody);
  });
});

.click can be replaced with .mousedown and so on.. or just

$(function () {
  $('[name=emailLink]').each(function() {
    var email = '[email protected]';
    var subject = 'Circle Around';
    var emailBody = 'Some blah';
    $(this).attr('href', 'mailto:' + email +
           '?subject=' + subject + '&body=' +   emailBody);
  });
});

Granvillegranvillebarker

i would not even do a click event here. just set href on load – Ineslta

@LoganMurphy who knows why he wants to do it this way ) on my site I scramble email originally, restoring it after the page loads and replacing hrefs only on clicks. – Granvillegranvillebarker

@LoganMurphy Can you update/elaborate? My requirement is simple. Click the anchor link and send email using jqeury. Thats all. – Quaff

@KevinRave did you try the code above? Or you can just set href onload, without attaching click listener. – Granvillegranvillebarker

@Granvillegranvillebarker can you update your answer, would you please update the answer with that Logan said? – Quaff

@KevinRave Check an answer again. – Granvillegranvillebarker

@Granvillegranvillebarker you just replaced, click with each. Correct? I guess, its not onLoad? – Quaff

@KevinRave this is ("$(function () {") a replacement for $(document).ready function - when DOM is ready your link(s) (through the function .each) will get a correct href attribute. There is not need to do it on window load, DOM ready is enough. – Granvillegranvillebarker

I see that, with this solution it dynamically appends href to the anchor element. The URL is visible when I hover the mouse over the link. Though this works, I want to avoid showing the entire URL in the link itslef. One of the primary reasons I wanted a jQuery solution. – Quaff

@KevinRage It is easy to see that URL anyway. If you want to do it through the window.location - jsfiddle.net/m9vzoxa0 – Granvillegranvillebarker

Yes, thats the solution krozo recommended. (In the comments). – Quaff

Answer 4

Your selector is looking for an ID

$('#emailLink')

But you have only specified the name.

Add id="emaillink" to the anchor tag.

Cephalo

Updated my post. Its typo. – Quaff

This should have been a comment rather than an answer! :-) – Quaff

Why is that? It answered your question "Why doesn't this work?" How was I supposed to know you had a typo. – Cephalo

Based on the question. Like the others commented out.. Please check the comments from others. Even if its the way you entered, it does not work. – Quaff

Answer 5

You don't need any javascript/jQuery at all for this, just the following HTML should do:

<a href="mailto:[email protected]?subject=Circle Around&body=Some blah" name="emailLink">Email</a>

Acrimonious

I know how to put it directly in href. I needed it using jQuery. Thanks! – Quaff

The OP noted he needed jQuery. – Brakpan