Improve company productivity with a Business Account.Sign Up

x
?
Solved

Email content within a <div> tag, from a webpage

Posted on 2006-06-17
5
Medium Priority
?
2,242 Views
Last Modified: 2015-02-11
Hi,

I need to create a link / button that will send all content of a targeted <div> as an Email via the clients E-mail program (Outlook 2003). This link should open the users default email program and paste the div's content from the browser into the body of the message.

Same concept as using IE to send the page via Email but the problem is that the page is built with Frames and will not send the relative content only (ie: the <div>).

How do i create the function in Javascript in the <head> tag and call it from the <body> of the HTML page?

Thanks,
Dave
0
Comment
Question by:evansdavid
  • 2
3 Comments
 
LVL 6

Expert Comment

by:pD_EO
ID: 16929239
Something like this?

<html>
<head>
<title>Div content to email</title>
<script type="text/javascript">
<!--

function email_content(){
      var subject = "My email";
      var body = "";

      if(document.getElementById("divemail")){
            body = document.getElementById("divemail").innerHTML;
      }

      return "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
}

//-->
</script>
</head>
<body>

<div id="divemail">
      Your content goes here
</div>

<a href="mailto: username@domain.com" onclick="this.href += email_content()">click</a>

</body>
</html>
0
 

Author Comment

by:evansdavid
ID: 16930771
Hey that does work but it places the literal HTML code of the <div> as the content into the body of the E-Mail.

So lets say:

----

<html>
<head>
<title>Div content to email</title>
<script type="text/javascript">
<!--

function email_content(){
     var subject = "My email";
     var body = "";

     if(document.getElementById("divemail")){
          body = document.getElementById("divemail").innerHTML;
     }

     return "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
}

//-->
</script>
</head>
<body>

<div id="divemail"><br>
  <table width="100%" border="0">
    <tr>
      <td>Testing</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>1</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>2</td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>

<a href="mailto: xxx@xxx.xxx" onClick="this.href += email_content()">click</a>

</body>
</html>

----

Problem is, the content of the <div id="divemail"> gets placed into the Body of the E-Mail in Literal code (plain text) as follows:

----

<table width="100%" border="0">
    <tr>
      <td>Testing</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>1</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>2</td>
    </tr>
  </table>
  <p>&nbsp;</p>

----

Thanks for the assist,

Its Almost working but how do I get it to come out correctly as a functional Web document in the body of the E-Mail?
Dave

0
 
LVL 6

Accepted Solution

by:
pD_EO earned 1000 total points
ID: 16930851
Ah I see.  You could try changing this line...

return "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);

To this...

return "?subject=" + encodeURIComponent(subject) + "&body=" + body;
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question