Adding an Array to an a href link using Javascript/Jquery

Question

I'm currently writing a functionality, whereby the users will click on a particular email and this will be added to a list in the local storage, thereafter, the user will click a button, essentially that button should popular a href tag, so that all the mail addresses are copied to user's default email settings (in my case outlook).

My question is how do you convert this into an email format?, I have tried loading it into the tag and it works, but then Django interprets this as a URL, not a mailing list?

So far I have the following:

<td class="virtualTd" onclick="putThis(this)">{{ client.email }}</td>

<script>
const emails_list = []
function putThis(control) {
var email = control.innerText;
emails_list.push(email);
}
</script>

This populates an array with all the addresses,

Thereafter, the user can click this button to load the data in to local storage, with the ultimate intention to load the outlook email

<a href="#" id="sendEmail" class="btn btn-primary" onclick="popEmail()"> Email Client </a>

<script>     

        function popEmail() {
           const jsonArr = JSON.stringify(emails_list);
           localStorage.setItem("array", jsonArr);
           const str = localStorage.getItem("array");
           const parsedArr = JSON.parse(str);
           console.log(parsedArr);
           var a = document.getElementById('sendEmail');
           a.href = parsedArr;
        }



</script>

mplungjan · Accepted Answer · 2021-12-05T15:33:27.860

1

Why the localStorage?

NOTE: It is very possible that the user does not have an email client set up to handle a click on a mailto

Also not there may be different Email separating character in HTML mail link is different across mail clients

Working example

let emails_list = []
window.addEventListener("load",function() {
  document.getElementById("tb").addEventListener("click", e => {
    const tgt = e.target;
    if (tgt.classList.contains("virtualTd")) {
      const email = tgt.textContent.trim();
      if (!emails_list.includes(email))
      emails_list.push(email);
    }
    if (emails_list.length>0) {
      const href = `mailto:${emails_list.join(",")}?subject=Test&body=Test%20Body` // or ";" 
      console.log(href)
      document.getElementById("mailDiv").innerHTML = `<a 
      href="${href}" class="btn btn-primary">Email Client</a>`
    }    
  });
})

<table>
  <tbody id="tb">
    <tr>
      <td>Joe</td>
      <td class="virtualTd">Joe@mail.com</td>
    </tr>
    <tr>
      <td>Fred</td>
      <td class="virtualTd">Fred@mail.com</td>
    </tr>
  </tbody>
</table>
<div id="mailDiv"></div>

edited Dec 05 '21 at 15:33

answered Dec 05 '21 at 14:36

mplungjan

169,008
28
173
236

thanks it is almost perfect, but for some reason the pop-up doesn't appear, the console message is correctly populated but usually when I have an email link, the outlook console pops - I completely agree with your comment regarding email setup, but the company uses outlook, so it has to work only for outlook – Francisco Colina Dec 05 '21 at 14:57
You cannot run this from here. It has to be from a web page - SO will block this kind of link – mplungjan Dec 05 '21 at 15:14
I realize that, but if I run it on my project there is no outlook pop-up – Francisco Colina Dec 05 '21 at 15:17
My bad. So used to preventDefault. Please remove that line – mplungjan Dec 05 '21 at 15:21
Yes, mplungjan, I think what is happening is that the href is updated but is not clicked, the first event listener triggers the initial click, then you built the href, but the href is never called again – Francisco Colina Dec 05 '21 at 15:30
1

See update. I added a working example – mplungjan Dec 05 '21 at 15:33

Adding an Array to an a href link using Javascript/Jquery

1 Answers1