mailto: add users dynamically to same email

Question

Lets say I have a list of users I want to email. The mailto: lets me open up email and it inserts their email address. I want this to be dynamic.

mailto:1@1.com

mailto:2@2.com

mailto:3@3.com

mailto:4@4.com

Example: I click on user 1 & 4 and send and email out. Next time, I click on 2 & 3 and send another email out.

Problem: Right now, every time I click on a user, it opens up a new window. I would be sending out separate emails to user to 1 & 4. What function would I have to use so it does not open up a new email window every time I click on an email. If I click all the users 1 to 4, I want all 4 emails addresses to be in the same window so I am sending out 1 email to all 4 users. Not the other way around.

Answer 1

You could use Javascript or Jquery to detect the clicks, prevent the default action, and then compile them into a list. Then a second button would have to be used to trigger the action.

<a href='1@1.com' class='mailto'>User 1</a>
<a href='2@2.com' class='mailto'>User 2</a>
<a href='mailto:' id='combined' style='display: none;'></a>
<input type='button' value='Send' id='send'>

<script>
$('.mailto').click(function(e){
    e.preventDefault();
    $('#combined').attr('href',$('#combined').attr('href') + $(this).attr('href') + ';');
});
$('#send').click(function(e) {
    $('#combined')[0].click();
});

</script>

See example: http://jsfiddle.net/evVR8/2

You would probably also want to have a clear button that would return #combined's href back to 'mailto:'

EDIT - updated jsfiddle to have a clear and display list of users currently selected.

You could also use a combination of this and @Brad-Christie's answer, so they can simply use checkboxes so it is easier to see who you are sending to. But instead of using the window.location.replace use the hidden link and click trigger.

Answer 2

Though there is no regulated way to send emails to multiple recipients via the mailto: protocol, you could introduce a format that uses checkboxes (or some other fashion) to mimic it. However, as already stated, there's no guarantee it'll work:

<label>
  <input type="checkbox" name="to" value="1@1.com">1@1.com
</label>
<label>
  <input type="checkbox" name="to" value="2@2.com">2@2.com
</label>
<label>
  <input type="checkbox" name="to" value="3@3.com">3@3.com
</label>
<label>
  <input type="checkbox" name="to" value="4@4.com">4@4.com
</label>
<input type="button" value="Send Email" id="send-email" />

Use some jQuery here for simplicity:

$('#send-email').on('click', function(e){
  var to = [];
  $('input[name="to"]:checked').each(function(){
    to.push($(this).val());
  });
  window.location.replace('mailto:' + to.join(','));
  e.preventDefault();
  return false;
});

Example of the above

However, you're better off using PHP in the back-end to send the email as it can (and will) handle multiple recipients gracefully and consistently.

Answer 3

Please check out this link

When you know how to add multiple recipients, just concatenate the string with addresses or add simple javascript with checkboxes