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>

CodePudding user response：

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 Body` // or ";" 
      console.log(href)
      document.getElementById("mailDiv").innerHTML = `<a 
      href="${href}" >Email Client</a>`
    }    
  });
})

<table>
  <tbody id="tb">
    <tr>
      <td>Joe</td>
      <td class="virtualTd">[email protected]</td>
    </tr>
    <tr>
      <td>Fred</td>
      <td class="virtualTd">[email protected]</td>
    </tr>
  </tbody>
</table>
<div id="mailDiv"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>