CODEWITHSUNDEEP
javascriptfunctionmailto
roberto magini
roberto magini

Reputation: 31

Adding onclick=window.location=mailto: where recipient is a variable in a function

I have a page that is used by Doctors, where they can write the patient email select a bounce of documents, and via "mailto" create a formatted email. This doesn't work on Safari iOS.

The problem I found is mailto does not work with Safari iOS if launched from home screen (as a web app). It works using onclick=window.location I tried to implement it on my function but it is not working

so I am trying to implement something like this:

<a href="#" onclick="window.location='mailto:[email protected]?subject=Docs&body=Hallo%20you%20and%20links'; return false;" class="noHighlight">Write and email</a>

in my function:

function buildMailto(recipient, subject, body) {
  var mailToLink = "mailto:" + recipient + "?";
  var mailContent = "Subject=" + subject + "&";
  mailContent += "[email protected]&";
  mailContent += "body="
  mailContent += encodeURIComponent(body);
  a.href = mailToLink + mailContent;
}

I am trying to edit:

function buildMailto(recipient, subject, body) {
var mailToLink = " '#'  onclick=\"window.location='mailto:" + recipient +"?";
  var mailContent = "Subject=" + subject + "&";
  mailContent += "[email protected]&";
  mailContent += "body="
  mailContent += encodeURIComponent(body);
  mailContent +=  "return false;  class='noHighlight' ";
  a.href = mailToLink + mailContent;
}

Not having any results at the moment

Upvotes: 1

Views: 2074

Answers (3)

attacomsian
attacomsian

Reputation: 2933

In your buildMailto function, you didn't specify what is a. Instead of updating onclick attribute value when the anchor link is clicked, you should build a mailto URL and update window.location.href. Here is an example:

<a href="#" id="email-link" class="noHighlight">Write and email</a>

Event listener for anchor link:

document.querySelector('#email-link').addEventListener('click', function (e) {
    e.preventDefault();

    buildMailto('[email protected]', 'Docs', 'Hi, there!');
});

Change your buildMailto to the following:

function buildMailto(recipient, subject, body) {
    var mailLink = "mailto:" + recipient + "?";
    mailLink += "Subject=" + subject + "&";
    mailLink += "[email protected]&";
    mailLink += "body="
    mailLink += encodeURIComponent(body);
    window.location.href = mailLink;
}

Upvotes: 1

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

There were a few issues with your code:

  • a was never defined. Give your link an ID and select id by using document.getElementById()
  • You cannot set the href attribute of the link and "break out" using double quotes in order to add the onclick attribute to the element. Instead:
  • add the click event using .addEventListener(). Alternatively, you could use .setAttribute('onclick', 'window.location.href = "' + mailToLink + mailContent + '"; return false;'); if you wanted to be able to see the click event using your browser's DOM inspector, but it doesn't really make sense. 
    function buildMailto(recipient, subject, body) {
var mailToLink = "mailto:" + recipient +"?";
  var mailContent = "Subject=" + subject + "&";
  mailContent += "[email protected]&";
  mailContent += "body="
  mailContent += encodeURIComponent(body);
  document.getElementById('myLink').addEventListener('click', function() {
    window.location.href = mailToLink + mailContent;
    return false;
  });
}

buildMailto('[email protected]', 'a subject', 'mail content');
    <a href="#" id="myLink" class="noHighlight">Write and email</a>

Upvotes: 1

ImGroot
ImGroot

Reputation: 836

Try embedding your actionable into a form. Like this:

<form action="mailto:[email protected]?subject=Docs&body=Hallo%20you%20and%20links" method="GET">
  <button class="noHighlight" type="submit">Write and email</a>
</form>

Upvotes: -1

Related Questions