We help IT Professionals succeed at work.

Modify mailto code

rtod2
rtod2 asked
on
The mailto code on the page below creates form field that is not needed.  Clicking the "Click to Send Email" link on this current-project page does almost what I want it to do but needs to be modified in the following way.

The body of the email should contain the link to the name of the page as it does but should only show the last part of the URL.  So instead of showing http://www.frugalmule.com/current-project, it would just show the words current-project.

The title of the email should be formatted as whatever the title is.

The link also doesn't appear to become active until you place your cursor in the form field which should not be required.

Assistance is greatly appreciated.
<label>Email Address: </label>
<input type="text" id="send_email" onBlur="document.getElementById('email_link').href = 'mailto:' + this.value + '?subject=Check Out This Link&body=' + document.URL; ">

<a href="javascript:void(0)" id="email_link">Click to Send Email</a>

Open in new window

Comment
Watch Question

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
looks like not possible, and you cannot trust on client email settings... maybe they dont have email client installed...
create a form, around email and submit to server
on server side, create an email and send using some third party email component
you will have full control on email... with js, probably you willnot be able to use html code in body... email format should be set to HTML

so, forget about client side, and have a look at server side scripting...

Author

Commented:
I am just looking to develop a link that can open the person's default email program and include the title of the page along with a link to it.  Maybe we are making it too difficult with Javascript but that task is surely doable today.
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
looks like you cannot use html in body... so, if there is no html, you cannot use links

sample link:

Visit us at <a href="http://www.HainKurt.com">HainKurt</a>!

only simple text in body...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
if all users use IE & outlook (maybe an internal web site) you can use Outlook & ActiveX

have a look at this

http://www.webdeveloper.com/forum/showthread.php?t=176548
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
http://tools.ietf.org/html/rfc2368
-->
http://tools.ietf.org/html/rfc6068

The special <hfname> "body" indicates that the associated <hfvalue>
   is the body of the message.  The "body" field value is intended to
   contain the content for the first text/plain body part of the
   message.  The "body" pseudo header field is primarily intended for
   the generation of short text messages for automatic processing (such
   as "subscribe" messages for mailing lists), not for general MIME
   bodies.
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
so, you are out of luck... server side coding is the only way to go, or just plain text (users copy paste the url in email)
or you hope email client will create an auto link around that url (full url, not a description and hidden url)
Top Expert 2011

Commented:
If you want to only show the path to the current page and not the full URL, replace document.URL with window.location.pathname

If you want to make the email address field optional, you can move the "onBlur" into a function and call that function when the page is loaded.

See below (you will want to add the appropriate document.ready, etc.)

<html>
<head>
<script>
function updateEmailLink(){
  var thisPage = window.location.pathname;
  document.getElementById('email_link').href = 'mailto:' + this.value + '?subject=Check Out This Link&body=' + thisPage; 
}
</script>
</head>
<body>
<label>Email Address: </label>
<input type="text" id="send_email" onBlur="javascript:updateEmailLink();">

<a href="javascript:void(0)" id="email_link">Click to Send Email</a>
<script>
updateEmailLink();
</script>
</body>
</html>

Open in new window

Top Expert 2011

Commented:
Sorry - I missed the part where you want the page name to actually be a live link.
For that, you'll need to investigate server side scripting as HainKurt mentioned (user submits a form to you and you send them an HTML email)

Author

Commented:
Nap0leon,
Thank you for your modification of this code
<label>Email Address: </label>
<input type="text" id="send_email" onBlur="document.getElementById('email_link').href = 'mailto:' + this.value + '?subject=Check Out This Link&body=' + document.URL; ">

<a href="javascript:void(0)" id="email_link">Click to Send Email</a>

Open in new window

with this code
<html>
<head>
<script>
function updateEmailLink(){
  var thisPage = window.location.pathname;
  document.getElementById('email_link').href = 'mailto:' + this.value + '?subject=Check Out This Link&body=' + thisPage; 
}
</script>
</head>
<body>
<label>Email Address: </label>
<input type="text" id="send_email" onBlur="javascript:updateEmailLink();">

<a href="javascript:void(0)" id="email_link">Click to Send Email</a>
<script>
updateEmailLink();
</script>
</body>
</html>

Open in new window

This does seem to get rid of the need to put an email address into the field which allows the "Click to Send Email" to be immediately available.  With the old code though, the email body contained a link to the page which does need to be there.  Ideally, the title of the email could also take on the title of the page.  Please update if possible.  I greatly appreciate the assistance!
Top Expert 2011
Commented:
I updated the function to use the web page's Title as the subject line (and the full URL in the body of the email).  I added a bit of error handling so that it doesn't bomb on pages that don't have a title set.

function updateEmailLink(){
  var title = "Check out this page";
  if (document.title){title +=': '+document.title;}
  document.getElementById('email_link').href = 'mailto:' + this.value + '?subject='+title+'&body=' + window.location.href; 
}

Open in new window

HainKurtSr. System Analyst
CERTIFIED EXPERT
Commented:
actually the code should be as below:

but still, it has nothing to do with your original request
<html>
<head>
<script>
function updateEmailLink(t){
  var thisPage = window.location.pathname;
  document.getElementById('email_link').href = 'mailto:' + t.value + '?subject=Check Out This Link&body=' + thisPage; 
}
</script>
</head>
<body>
<label>Email Address: </label>
<input type="text" id="send_email" onBlur="javascript:updateEmailLink(this);">

<a href="javascript:void(0)" id="email_link">Click to Send Email</a>

</body>
</html>

Open in new window

Top Expert 2011

Commented:
Thanks - I forgot to accept "this" into the function... doh!

Author

Commented:
Nap0lean and HainKurt,  Thank you!

Nap0lean, Your latest code completed here
<html>
<head>
<script>
function updateEmailLink(){
  var title = "Check out this page";
  if (document.title){title +=': '+document.title;}
  document.getElementById('email_link').href = 'mailto:' + this.value + '?subject='+title+'&body=' + window.location.href; 
}
</script>
</head>
<body>
<label>Email Address: </label>
<input type="text" id="send_email" onBlur="javascript:updateEmailLink();">

<a href="javascript:void(0)" id="email_link">Click to Send Email</a>
<script>
updateEmailLink();
</script>
</body>
</html>

Open in new window

gets me close to what I am looking for but not quite.  Here is a 2 minute video with the desired end result pictured at the end http://screencast.com/t/dbmKrj9XZWl.  Thanks again for the assist.

Author

Commented:
Closing in favor of clarifying desired result.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.