CODEWITHSUNDEEP
javascriptjqueryhtml
Paul Pehrson
Paul Pehrson

Reputation: 138

Trying to add the title tag to a mailto link, with the URL in the body

I am creating a help site for our product. It will be deployed by our customer services group on the web (for logged in customers), and it will be deployed with our software. We wanted to create a feedback mechanism, but we can't use a server-side script, since in some cases, users will be viewing the help site locally.

We are working on a long term solution, but for now we are trying to do this with a simple <a href="mailto"> link (which we've formatted to look like a button):

<p class="docfeedback"><a href="mailto:[email protected]?subject=Documentation Feedback" title="We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: [email protected]>

What I want is to get the value of the <title> element and put that in the Subject, and I'd like to get the url pathname (pathname only) in the body line.

I've read several answers that give me part of the solution, but I'm hoping to put it all together, and coded the right way.

I've been reading about using javascript to get the URL, which I was able to do successfully in the body of the message. But then I tried to use this answer to put the first H1 in the topic as the subject of the message. I then changed it to get the title element. (My project has access to jquery [1.8.3] automatically, so I don't have to specifically call it.)

So, that worked, but I am not sure how to put them both together. Here is the current code in my HTML. 

<script>
  $(document).ready(function(){
  var mailtoHref = $('#mailme a').attr('href'); //get href
  var h1Text = $('title').text(); //get h1 text
  $('#mailme a').attr('href', mailtoHref + h1Text ); //append it to mailto://
  });
</script>
<div id="mailme">
  <p class="docfeedback">
    <a href="mailto:[email protected]?subject=Documentation Feedback for topic: " title="We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: [email protected]">Send us documentation feedback</a>
  </p>
</div>


p.docfeedback	/* only used on master page for feedback link */
{
	text-align: center;
	font: bold 11px Arial;
	text-decoration: none !important;
	background-color: #EEEEEE;
	padding: 5px 9px 5px 9px;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	width: 225px;
}

p.docfeedback a:link,
p.docfeedback a:visited,
p.docfeedback a:hover,
p.docfeedback a:active
{
	color: #666;
	text-decoration: none !important;
}
<head>
  <title>This is the name of the document</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  </head>
  <script>/* <![CDATA[ */
				$(document).ready(function(){
				var mailtoHref = $('#mailme a').attr('href'); //get href
				var h1Text = $('title').text(); //get h1 text
				$('#mailme a').attr('href', mailtoHref + h1Text ); //append it to mailto://
				});
			/* ]]> */</script>
            <div id="mailme">
                <p class="docfeedback"><a href="mailto:[email protected]?subject=Documentation Feedback for topic: " title="We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: [email protected]">Send us documentation feedback</a>
                </p>
            </div>

Any help you can provide, I would greatly appreciate.

Upvotes: 0

Views: 2968

Answers (1)

Jakob
Jakob

Reputation: 3546

jQuery for adding current url to body of email is below

 $(document).ready(function() {
   var url = window.location.href; //get url
   var h1Text = $('title').text(); //get h1 text
   var email = '[email protected]';
   var body = url;
   var subject = 'Documentation Feedback for topic: '+h1Text;
   var hrefTitle = 'We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: '+email;
   $('#mailto').attr('href','mailto:'+email+'?body='+body+'&subject='+subject);
   $('#mailto').attr('title', hrefTitle);
 });

And html mailto link is like this now

<a id="mailto" href="" title="">Send us documentation feedback</a>

Full code is here https://jsfiddle.net/50c99uan/2/

Upvotes: 2

Related Questions