views:

107

answers:

2
+1  Q: 

Email Div Content

I am trying to email the content of a Div. We have a booking system online and the user selects what options they want, then submit the form. It displays their information on the next page for them to print. I also want a copy of that emailed to them and us.

I liked the look of Jonathon Sampson's email div using ajax script. But it does not work for me. The email always comes back saying 'null' even if I give it a simple Div with one word written in it.

I do not know enough about PHP and have previously used CGI. THe problem with CGI is I cannot style the email. An the problem that I have found with PHP so far is that although I can add HTML to the email I cant decide what I want displayed where, and put returns from peoples forms inside DIVs in the HTML email.

If you take a look at the following page you will get a look at the Booking PAge. This page is where the initial form submission returns its information to. Everything inside the DIV tag 'booking-quote' I want emailed to the user one way or the other. Attached is the code .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<div align="right" style="padding-top:10px;" id="booking_quote">
  <table width="775" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><table width="775" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="18" height="30" style="background:url(../../../IMAGES_A/Structure/Headers/blue-corner-piece-left-30px.gif); background-repeat:no-repeat;">&nbsp;</td>
          <td bgcolor="#263D51" style="border-left:1px solid #FFF; border-right:1px solid #FFF; padding-left:5px;"><div align="left" class="Text_normal" style="font-size:13px; color:#FFF;">Customer Records</div></td>
          <td width="18" height="30" style="background:url(../../../IMAGES_A/Structure/Headers/blue-corner-piece-right-30px.gif); background-repeat:no-repeat;">&nbsp;</td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td style="padding-top:10px;"><div align="center">
        <table width="755" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="500"><div align="left">
              <table width="490" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="Corner-Box-WhiteGrey-TL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-T" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-TR" height="6" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-L" width="6"></td>
                  <td width="478"><table width="478" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="50%" valign="top"><div align="left" class="Text_normal">
                        <table width="230" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="77" valign="top" style="padding-right:12px;"><div align="right" style="color:#999;">Name</div></td>
                            <td width="153" valign="top" style="font-size:13px; line-height:22px; color:#333;"><div align="left"> <?php echo $_POST["CD_first-name"];?> <?php echo $_POST["CD_mid-initial"];?> <?php echo $_POST["CD_surname"];?></div></td>
                          </tr>
                          <tr>
                            <td valign="top" style="padding-right:12px;"><div align="right" style="color:#999;">Address</div></td>
                            <td valign="top" style="font-size:13px; color:#333;"><div align="left"> <?php echo $_POST["CD_address-L1"];?> <br />
                              <?php echo $_POST["CD_address-L2"];?> <br />
                              <?php echo $_POST["CD_address-settlement"];?><br />
                              <?php echo $_POST["CD_address-county"];?><br />
                              <?php echo $_POST["CD_address-post-code"];?><br />
                              <?php echo $_POST["CD_address-country"];?></div></td>
                          </tr>
                        </table>
                      </div></td>
                      <td width="50%" valign="top"><div align="right" class="Text_normal">
                        <table width="230" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="77" valign="top" style="padding-right:12px;"><div align="right" style="color:#999;">Date of Birth</div></td>
                            <td width="153" valign="top" style="font-size:13px; line-height:22px; color:#333;"><div align="left"> <?php echo $_POST["CD_DOB-day"];?>/<?php echo $_POST["CD_DOB-month"];?>/<?php echo $_POST["CD_DOB-year"];?></div></td>
                          </tr>
                          <tr>
                            <td valign="top" style="padding-right:12px;"><div align="right" style="color:#999;">Email</div></td>
                            <td valign="top" style="font-size:13px; line-height:22px; color:#333;"><div align="left"> <?php echo $_POST["CD_email"];?></div></td>
                          </tr>
                          <tr>
                            <td valign="top" style="padding-right:12px;"><div align="right" style="color:#999;">Telephone</div></td>
                            <td valign="top" style="font-size:13px; line-height:22px; color:#333;"><div align="left"> <?php echo $_POST["CD_telephone"];?></div></td>
                          </tr>
                        </table>
                      </div></td>
                    </tr>
                  </table></td>
                  <td class="Corner-Box-WhiteGrey-R" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-BL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-B" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-BR" height="6" width="6"></td>
                </tr>
              </table>
            </div></td>
            <td width="255" valign="top"><div align="right">
              <table width="250" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="Corner-Box-WhiteGrey-TL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-T" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-TR" height="6" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-L" width="6"></td>
                  <td><div align="center" class="Text_normal">
                    <table width="230" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td valign="top" style="padding-right:12px;"><div align="left" style="color:#999;">Highest Current Qualifiacation</div></td>
                      </tr>
                      <tr>
                        <td valign="top" style="font-size:13px; line-height:22px; color:#333;"><div align="left"> <?php echo $_POST["CD_experience-qualifications"];?></div></td>
                      </tr>
                      <tr>
                        <td width="230" valign="top" style="padding-right:12px; padding-top:5px;"><div align="left" style="color:#999;">Total Logged Dives to Date</div></td>
                      </tr>
                      <tr>
                        <td valign="top" style="font-size:13px; line-height:22px; color:#333;"><div align="left"> <?php echo $_POST["CD_experience-dives"];?></div></td>
                      </tr>
                    </table>
                  </div></td>
                  <td class="Corner-Box-WhiteGrey-R" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-BL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-B" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-BR" height="6" width="6"></td>
                </tr>
              </table>
            </div></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
  <br />
  <table width="775" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><table width="775" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="18" height="30" style="background:url(../../../IMAGES_A/Structure/Headers/blue-corner-piece-left-30px.gif); background-repeat:no-repeat;">&nbsp;</td>
          <td bgcolor="#263D51" style="border-left:1px solid #FFF; border-right:1px solid #FFF; padding-left:5px;"><div align="left" class="Text_normal" style="font-size:13px; color:#FFF;">Details</div></td>
          <td width="18" height="30" style="background:url(../../../IMAGES_A/Structure/Headers/blue-corner-piece-right-30px.gif); background-repeat:no-repeat;">&nbsp;</td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td style="padding-top:10px;"><div align="center">
        <table width="755" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="575"><div align="left" class="Text_normal">
              <table width="565" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="Corner-Box-WhiteGrey-TL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-T" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-TR" height="6" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-L" width="6"></td>
                  <td width="553"><table width="553" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td width="428" valign="top" style="padding-bottom:3px; border-bottom:1px solid #CCC;"><div align="left" class="Text_Sub_Title"><?php echo $_POST["programme"];?></div></td>
                      <td width="125" valign="top" style="padding-bottom:3px; border-bottom:1px solid #CCC;"><div align="right" class="Text_Sub_Title" style="color:#333;">£<?php echo $_POST["Prog_total"];?></div></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top" style="padding-top:3px;"><ul>
                        <div><?php echo $_POST["Prog_Sum_Sub_Open_Water_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Open_Water_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Refresh_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Refresh_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Advanced_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dives_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Safari_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Safari_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_2"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_3"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_4"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_5"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_6"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Dive_Specialities_01_7"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Discover_Safari_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Discover_Safari_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Equipment_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Accommodation_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Accommodation_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Accommodation_01_2"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Accommodation_01_3"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_PADI_Materials_Fees_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_PADI_Materials_Fees_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Transfers_01_0"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Transfers_01_1"];?></div>
                        <div><?php echo $_POST["Prog_Sum_Sub_Transfers_01_2"];?></div>
                      </ul></td>
                    </tr>
                  </table></td>
                  <td class="Corner-Box-WhiteGrey-R" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-BL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-B" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-BR" height="6" width="6"></td>
                </tr>
              </table>
              <br />
              <table width="565" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="Corner-Box-WhiteGrey-TL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-T" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-TR" height="6" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-L" width="6"></td>
                  <td width="553"><table width="553" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td width="428" valign="top"><div align="left" class="Text_Sub_Title"><?php echo $_POST["Store_Dive_The_Gap_Equipment_Package"];?></div></td>
                      <td width="125" valign="top"><div align="right" class="Text_Sub_Title" style="color:#333;"><?php echo $_POST["Store_Dive_The_Gap_Equipment_Package_total"];?></div></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top" style="padding-top:3px;"><ul>
                        <div>
                          <div><?php echo $_POST["Store_Dive_The_Gap_Equipment_Package_details"];?></div>
                        </div>
                      </ul></td>
                    </tr>
                  </table></td>
                  <td class="Corner-Box-WhiteGrey-R" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-BL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-B" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-BR" height="6" width="6"></td>
                </tr>
              </table>
            </div></td>
            <td width="180" valign="top"><div align="right">
              <table width="170" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="6" colspan="3" valign="middle" class="Text_normal" style="background:url(../../../IMAGES_A/Structure/Headers/blue-Semicircle-170px.jpg); height:25px;"><div align="left" style="padding-left:20px; padding-top:4px; color:#FFF; font-size:13px; font-weight:bold;">Summary</div></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-L" width="6"></td>
                  <td width="158" bgcolor="#FFF"><div align="center" class="Text_normal" style="font-size:18px; color:#333; padding-top:12px; padding-bottom:12px; border-bottom:1px solid #CCC;">£<?php echo $_POST["Basket_Total"];?><span style="font-size:13px; color:#666; padding-left:4px;">incl. VAT</span></div>
                    <div align="center" class="Text_normal" style="font-size:12px; color:#666; padding-top:12px; padding-bottom:12px;"> <?php echo $_POST["Basket-Total-Duration-Text"];?><br />
                      <span style="font-size:10px; color:#666; padding-left:4px;">incl. arrival and departure day</span></div></td>
                  <td class="Corner-Box-WhiteGrey-R" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-BL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-B" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-BR" height="6" width="6"></td>
                </tr>
              </table>
              <br />
              <table width="170" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="6" colspan="3" valign="middle" class="Text_normal" style="background:url(../../../IMAGES_A/Structure/Headers/blue-Semicircle-170px.jpg); height:25px;"><div align="left" style="padding-left:20px; padding-top:4px; color:#FFF; font-size:13px; font-weight:bold;">Start Date</div></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-L" width="6"></td>
                  <td width="158" bgcolor="#FFF"><div align="left" class="Text_basic" style="padding-top:12px; padding-bottom:12px;">
                    <div align="center"><span style="font-size:14px; color:#666; padding-left:10px;" align="left" id="Prog-Start-Date-Text"></span><span class="Text_normal" style="font-size:12px; color:#666; padding-top:12px; padding-bottom:12px;"><?php echo $_POST["Prog_start-date"];?></span></div>
                  </div></td>
                  <td class="Corner-Box-WhiteGrey-R" width="6"></td>
                </tr>
                <tr>
                  <td class="Corner-Box-WhiteGrey-BL" height="6" width="6"></td>
                  <td class="Corner-Box-WhiteGrey-B" height="6"></td>
                  <td class="Corner-Box-WhiteGrey-BR" height="6" width="6"></td>
                </tr>
              </table>
            </div></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
  <br />
</div>
</body>
</html>
A: 

You have the id of the div as "booking_quote" in the HTML, not "booking-quote". Make sure you're using "booking-quote" in all places. Since you didn't attach the JavaScript code, it's hard to see what's going on, but the easiest thing would be to

  1. Put a form tag on your page. Give it an id of "my-form" or whatever.
  2. attach an event to your form's submit method
  3. in the method, take the contents of the div and put them into a hidden form field

Using jQuery, it would be something like:

$('form#my-form').submit(function()
{
  $('input#my-hidden-field').val($('div#booking-quote').text())
});
Tom
Good, that has worked, sort of. Many THanks,Now, the email that is coming across is working however it is not coming with any images or styling. So I included the urls to the CSS in the Div, but it did not seam to help. The URLS are full routes so that is not the problem.I tried including the whole page and it would appear the problem is systemic. There images do not go wither. It is as if the route is wrong, but it isn't.Any ideas?
Robin I Knight
That's a different problem and depends entirely on the email client you're viewing the email in. A lot email clients, especially web-based ones, clobber image paths. Are you sending the email as HTML or as a text email? If you're sending it as HTML, try sending it as text to see what the code looks like. Save it as a file, open it in a browser and see if it looks right.And if the answer worked for you, how about marking it correct/ voting it up?
Tom
I am using Apple Mail client, similar to Outlook. I got it to display the raw source of the email. I then copied that source and displayed it in a webpage. It looks like HTML code and it displays tables where there should be tables but it has added 719 back slashed '\' to the email before every quotation mark (ie. height="6\"\ )WHen I take these out manually the email displays as it should. How would I stop it from creating them in the first place, any ideas.
Robin I Knight
Here are the PHP Headers if you can spot a problem there:Here are the PHP headers: $headers = "From: Dive The Gap Sales Team <[email protected]>" . "\r\n" . "Content-type: text/html" . "\r\n"; mail($to, $subject, $message, $headers);
Robin I Knight
A: 

It sounds like you have magic quotes turned on in your PHP setup. Try wrapping your $message variable in stripslashes.

Tom
I had a read of what to do, and it when straight over my head. How do I do this. I had a parameter of str. How and where do I do that. I have no idea sorry.
Robin I Knight