javascript function that will copy/capture html content from webpage & paste/display it in an email

Question

I'm looking for a Javascript function that will copy the content(html) of a web page then paste this content into an email.

Essentially, I have a page that displays something like an order receipt & what I would like to do is capture this page & paste it into the body of an email.

Below is a little code snippet that I'm playing with. Currently, looking into getElementsById(). It's not much to see but should demo my current thinking & concept. That said, I'm open to all suggestions.

<!DOCTYPE html>
<html>
<body>

<h1>I'm A Heading</h1>

<div id="differnt_colors" style="border:1px solid black;background-color:pink">
  <p style="color:red;">I'm A Red Paragraph</p>
  <p style="color:green;">I'm A Green Paragraph</p>
  <p style="color:blue;">I'm A Blue Paragraph</p>
</div>

<p>
  Click the button to copy the div element above,
  including all its attributes and child elements,
  and append it to the document, and send email.
</p>

<button onclick="myFunction()">Copy And Send</button>

<script>
function myFunction() {
    var htmlElementContents = document.getElementById("differnt_colors");
    var cloneNodeTrueFalse = htmlElementContents.cloneNode(true);
    document.body.appendChild(cloneNodeTrueFalse);
}
</script>

</body>
</html>

Below is 'some' of the frontend & backend code from the application in question. This code is associated with sending the emails. These snippets have been abridged in a few places.

<%--Recipients--%>
        <fieldset class="legendbody">
            <legend class="legendTitle" style="font-size: 14px">
                <a name="Recipients">Recipients</a>
            </legend>
            <asp:CheckBoxList ID="CheckBoxListEmail" CssClass="checkBoxList" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="doberly@jacobscorp.com">Dean Oberly</asp:ListItem>
                <asp:ListItem Value="jtravis@jacobsco.onmicrosoft.com">Jimmy Travis</asp:ListItem>
                <asp:ListItem Value="cpetersen@jacobscorp.com">Christine Petersen</asp:ListItem>
                <asp:ListItem Value="cplumb@jacobscorp.com">Chad Plumb</asp:ListItem>
                <asp:ListItem Value="kfriedmann@jacobscorp.com">Kimberly Friedmann</asp:ListItem>
            </asp:CheckBoxList>

            <%--Send--%>
            <div style="text-align: center; font-size: 20px; font-weight: bold">
                <asp:LinkButton ID="LinkButtonSendEvent" runat="server" Visible="false">
                    <p>Send</p>
                </asp:LinkButton>
                <asp:Label ID="LabelEmailMessage" runat="server" Text=""></asp:Label>
            </div>
        </fieldset>
    </div>

Protected Sub LinkButtonSendEvent_Click(sender As Object, e As EventArgs) Handles LinkButtonSendEvent.Click
  Dim ELink As String = "http://s100dd5a:3010/harris-CGI/CustomerContactEventSelect.d2w/REPORT?baseVar=BaseConfiguration%2Eicl&portal=CUSTOMERCONTACT&"
        ELink = ELink & "contactNumber=" & LabelEventContNum.Text & "&customerNumber=" & LabelEventCustNum.Text & "&customerName=" & Server.UrlEncode(LabelEventCust.Text)
        ELink = ELink & "&eventSequence=" & LabelEventNum.Text & "&eventCode=" & LabelEventType.Text

  Dim htmlcontent As String = "<table> "
  h = h & "<tr><td style=""text-align:right; width:100px;"">Event Num:</td><td style=""padding-left:5px; font-size:small; width:700px;""> "
  h = h & "<span id=""ContentPlaceHolder1_LabelEventNum"">" & LabelEventNum.Text & "</span></td></tr> "

  Dim msg As New MailMessage()
  msg.From = New MailAddress(Session("UserName") & "@jacobscorp.com")

  For Each i As ListItem In CheckBoxListEmail.Items
    If i.Selected Then
      msg.To.Add(i.Value.ToString)
    End If
    Next
    msg.Subject = "Emailing Event #" & LabelEventNum.Text & " - " & LabelEventDesc.Text
    msg.IsBodyHtml = True
    msg.Body = h

    Dim client As New SmtpClient
    client.UseDefaultCredentials = False
    client.Host = "10.10.10.9"
    client.DeliveryMethod = SmtpDeliveryMethod.Network
    client.EnableSsl = False

    Try
      client.Send(msg)
      LabelEmailMessage.Text = "Message Sent Successfully"
      LinkButtonSendEvent.Visible = False

    Catch ex As Exception
      LabelEmailMessage.Text = ex.Message
    End Try

[check this](http://stackoverflow.com/questions/40247817/is-there-a-way-to-send-an-email-with-data-from-input-in-pure-html) — Max Koretskyi, Oct 25 '16 at 19:30
What email? How are you going to send it? Also what's with the weird numbering - you want _all_ of those things, right, I doubt somebody will go "Damn, I've got something that fulfills 2 and 3 but isn't a function". — VLAZ, Oct 25 '16 at 19:31
There is no such method as `getElementsById`. Every ID on a page has to be unique. Therefore, `getElementById` returns one element. And is singular. Also, you can't send emails with Javascript. — I wrestled a bear once., Oct 25 '16 at 19:32
@vlaz good point. It's been a while since I've used Stack. I've edited the post & added some of the code currently associated with sending emails. — , Oct 25 '16 at 20:22

score 0 · Accepted Answer · answered Oct 25 '16 at 19:40

AJAX + WebService:

You will typically need a call to a backend web-service to send the email, and use XMLHttpRequest to send an AJAX request with the message contents, assuming you have the backend web-service ready to handle this, the code will look like:

<!DOCTYPE html>
<html>
<body>

<h1>I'm A Heading</h1>

<div id="differnt_colors" style="border:1px solid black;background-color:pink">
  <p style="color:red;">I'm A Red Paragraph</p>
  <p style="color:green;">I'm A Green Paragraph</p>
  <p style="color:blue;">I'm A Blue Paragraph</p>
</div>

<p>
  Click the button to copy the div element above,
  including all its attributes and child elements,
  and append it to the document, and send email.
</p>

<button onclick="myFunction()">Copy And Send</button>

<script>
function myFunction() {
  var htmlElementContents = document.getElementById("differnt_colors").innerHTML;    
    
  var http = new XMLHttpRequest();
  var url = "send-email.php";
  var params = "data=" + encodeURI(htmlElementContents);
  http.open("POST", url, true);

 
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  http.onreadystatechange = function() {
      if(http.readyState == 4 && http.status == 200) {
          alert("Message Send to Web Service: " + http.responseText);
      }else{
          alert("Something went wrong.")
      }
  }
  http.send(params);
}
</script>

</body>
</html>

javascript function that will copy/capture html content from webpage & paste/display it in an email

1 Answers1

AJAX + WebService: