Sending E-mail to multiple people using input type "submit" whose E-mail address is in an-CodePudding

I have an HTML table with 3 columns of E-mail addresses. I am trying to figure out how I would go about sending out a mass E-mail to all the E-mail addresses that are in the table using the form action=mailto: and assigning that action to an input type="submit" button. Basically what I'm looking for is when I press the submit button, the browser will open my E-mail client and include everyone's E-mail address in it. I would imagine I have to assign some sort of ID to everyone's email address so when I press the button, the form will scan the table for an E-mail address to include in the "to" block of an E-mail.

Here is an example:

<form action="mailto:?"method="get">
<table >
<th >Office</th>
<th >Primary Representative</th>
<th >Alternate Representative</th>
<th >Phone #</th>
<th >Pri. E-mail</th>
<th >Alt. E-mail</th>
<th >Supervisor</th>
<th >Sup. E-mail</th>

<tr >
    <td >Mail Room</td>
    <td >Harry Frill</td>
    <td >Jack Daniels</td>
    <td >123-456-7890</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td >Lauren Jory</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
</tr>   
    <tr >
    <td >Labs</td>
    <td >Jay Holiday</td>
    <td >Tony Tarks</td>
    <td >987-676-5432</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td >Ben Dinkle</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
</tr>   
<input type="Submit" value="E-Mail all reps">
</table>
</form>

CodePudding user response：

I've added a button, along with an event listener that, when clicked, runs through all the <a> tags, extracts their email address, and creates a mailto: URL that includes all those addresses, and redirects the user to that URL.

document.querySelector('button#doIt').addEventListener('click', function() {
    var emails = []
    document.querySelectorAll('a[href^="mailto:"]').forEach(function(elmt){
        var email = elmt.getAttribute('href').replace(/^mailto:/, '')
        emails.push(email)
    });
    document.location.href = 'mailto:'   emails.join(',')
});

<table >
<tr>
    <th >Office</th>
    <th >Primary Representative</th>
    <th >Alternate Representative</th>
    <th >Phone #</th>
    <th >Pri. E-mail</th>
    <th >Alt. E-mail</th>
    <th >Supervisor</th>
    <th >Sup. E-mail</th>
</tr>
<tr >
    <td >Mail Room</td>
    <td >Harry Frill</td>
    <td >Jack Daniels</td>
    <td >123-456-7890</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td >Lauren Jory</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
</tr>   
<tr >
    <td >Labs</td>
    <td >Jay Holiday</td>
    <td >Tony Tarks</td>
    <td >987-676-5432</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
    <td >Ben Dinkle</td>
    <td ><a href="mailto:[email protected]">E-Mail</td>
</tr> 
</table>
<button id="doIt">Do it!</button>