How to copy/clone HTML headline text to href mailto subject line with jquery?

Question

I want to grab the h1 headline text and add it to the subject line of mailto. I got as far as this. I just don't know how to substitute 'replace this with the headline' with the correct expression. Would clone be in the right direction? Thanks for taking a look!

<h1>Headline</h1>
<div id="mailme"><a href="mailto:me@me.com?subject=">Email Link</a></div>


$('#mailme a').each(function() {
$(this).attr('href', $(this).attr('href') + 'replace this with the h1 headline');
});

Thanks to everyone that pitched in solutions. I have used it in a simple HTML page template where the client is editing content but has no HTML skill. Each content page has a email button which uses one of the scripts below to customize the email subject line depending on the page headline. I hope others will find this useful too.

do you want to copy a specific h1 to subject? – Umair Hamid Nov 26 '14 at 08:07 — Umair Hamid, Nov 26 '14 at 08:07
Yes, copy content inside h1 tag to subject line of mailto. – Simon Darby Nov 26 '14 at 08:09 — Simon Darby, Nov 26 '14 at 08:09

score 2 · Answer 1 · answered Nov 26 '14 at 08:13

Here you go. Assuming your HTML structure stays the same, first, we select #mailme as the ancestor of the link using the .closest function. Then, we select the previous sibling of #mailme using the .prev function. Check out the working code snippet.

var headline;
$('#mailme a').each(function() {
  headline = $(this).closest('#mailme').prev('h1').text();
 $(this).attr('href', $(this).attr('href') + headline);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Headline</h1>
<div id="mailme"><a href="mailto:me@me.com?subject=">Email Link</a></div>

Biko, this is great too! Thanks so much for all the effort in building the demo too. — Simon Darby, Nov 26 '14 at 09:24

Anubhav · Accepted Answer · 2014-11-26T08:17:32.433

1

$('#mailme a').each(function() {
    $(this).attr('href', $(this).attr('href') + $('h1').text());
});

This should work.

If you have multiple h1 tags (as pointed out by biko) the following will work

$('#mailme a').each(function() {
    $(this).attr('href', $(this).attr('href') + $(this).closest('#mailme').prev('h1').text());
});

edited Nov 26 '14 at 08:17

answered Nov 26 '14 at 08:09

Anubhav

7,138
5
21
33

1

Note that this will not work if you have more than one h1 tag on the page, and note that having multiple h1's on a page is HTML5 compliant. – biko Nov 26 '14 at 08:14
Thanks Biko. I have used an ID with the h1 to avoid any problems. – Simon Darby Nov 26 '14 at 08:36

score 1 · Answer 3 · answered Nov 26 '14 at 08:15

Use this whole code.

    $(document).ready(function(){
       var mailtoHref = $('#mailme a').attr('href'); //get href
       var h1Text = $('h1').text(); //get h1 text
       $('#mailme a').attr('href', mailtoHref + h1Text ); //append it to mailto://
    });

score 0 · Answer 4 · edited Nov 26 '14 at 10:48

0

$(function() {
  $('#copy').append($('.elem').clone().children('a').prepend('foo - ').parent().clone());
});

Use this type of method, follow this link : http://bugs.jquery.com/query?milestone=1.5&group=status&page=4&order=version&row=description

edited Nov 26 '14 at 10:48

Veve

6,643
5
39
58

answered Nov 26 '14 at 08:17

Madhuka Dilhan

1,396
1
14
21

How to copy/clone HTML headline text to href mailto subject line with jquery?

4 Answers4

Linked