javascript - 如何通过电子邮件发送动态 html 代码块？

Question

你好，我想知道是否有任何方法可以将一段 html 代码发送到电子邮件地址。我有一个在名为“sum”的外部 JavaScript 文件中设置的变量，并且我在 html 代码中调用该变量，因此 html block 的一部分正在动态填充。我不知道如何以正常的 php 方式通过电子邮件发送此信息，所以我只是想知道是否可以将整个 html 代码块发送到电子邮件地址。

这是我想要发送的整个 html 代码块:

<div class="select-location-page">
      <h2>Where should we meet you?</h2>
      <p class="location-sub-header">Fill out this form and we will meet you within 1 hour!</p>


      <form action="../mail.php" method="POST" class="location-form">

            <div class="device-details">
              <h2>Device: iPhone5</h2>
              <h2>Repair Cost: $<span id="result">0</span></h2>
            </div>

            <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
            <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
            <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
            <input name="city" type="text" id="city" placeholder="City" maxlength="20">
            <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">

            <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">


            <div class="submit-btn">
                <input type="submit"  value="Submit Request" />
            </div>

      </form>

      <script>
        document.getElementById("result").innerHTML = localStorage.getItem("sum");
      </script>

  </div>

这是我尝试创建的php文件，除了修复成本之外，所有这些都有效(我尝试在html代码中声明一个php变量，然后将其放入mail.php文件中，但它不起作用)

<?php
$name = $_POST['name'];
$number = $_POST['number'];
$address = $_POST['address'];
$city = $_POST['city'];
$zip = $_POST['zip'];
$device = $_POST['device'];
$formcontent=" From: $name \n number: $number \n Address: $address \n City: $city \n Zip $zip \n Device: $device \n Repair Cost: (need this to work)";
$recipient = "joe.t.oconnor@gmail.com";
$subject = "Device Repair Request";
$mailheader = "From: $name \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
header('Location: thankyou.html');
?>

这是一个令人困惑的问题，任何帮助将不胜感激。谢谢!

Answer 1

(请参阅下面我的编辑)

您可以使用输出缓冲来捕获表单，并对操作使用完整的 http 调用并以 HTML 形式发送。

旁注:请务必将所有实例 example.com 更改为您的服务器地址。

示例:

<?php 

ob_start();

echo '

      <form action="http://www.example.com/mail.php" method="POST" class="location-form">

            <div class="device-details">
              <h2>Device: iPhone5</h2>
              <h2>Repair Cost: $<span id="result">0</span></h2>
            </div>

            <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
            <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
            <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
            <input name="city" type="text" id="city" placeholder="City" maxlength="20">
            <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">

            <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">


            <div class="submit-btn">
                <input type="submit"  value="Submit Request" />
            </div>

      </form>

';

$output = ob_get_contents();
ob_end_clean();

$to = "email@example.com";
$from = "email@example.com";

$subject = "Form submission";

$message = $output;

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$headers .= "From:" . $from;

mail($to,$subject,$message,$headers);

然后在您的 mail.php 文件中:

旁注:我遗漏了一些 POST 数组。您需要自己添加这些内容。这只是对我有用的一个例子。

<?php 

$first_name = $_POST['name'];

// The following is non-existant in your form. You can adjust to your liking.
$message = $_POST['message']; 

$to = "email@example.com";
$from = "email@example.com";

$subject = "Form submission 2";

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$headers .= "From:" . $from;

mail($to,$subject,$message,$headers);

<小时/>

脚注:

这里你可能无法使用JS，但是你可以尝试一下。我在测试中没有使用它。

您还必须使用某种形式的按钮或链接来告诉人们点击发送。这是一个实验性的答案。我会尽快修改它。

引用文献:

• http://php.net/manual/en/function.ob-start.php
• http://php.net/manual/en/function.ob-get-contents.php
• http://php.net/manual/en/function.ob-end-clean.php

<小时/>

编辑:

这是这个(新的，编辑过的)的工作原理。 (您需要将其他 POST 数组添加到 mail.php，如评论中所述)。

旁注:请参阅代码中的注释以获取一些添加的说明。 //注释...

• 用户输入他们的电子邮件地址(取自单独的表单)。
• 如果不为空，则捕获 POST 数组中的电子邮件。
• 如果电子邮件不为空，则将整个内容捕获到输出缓冲区中。
• 将表单发送给用户。

新代码:

<?php 

echo $form = '

      <form action="" method="POST" class="location-form">

            <input name="email_from" type="text" id="email_from">

                <input type="submit" name="submit" value="Submit Request" />

      </form>

';

if(!empty($_POST['email_from']) ){

// This outputs a message to the user after entering their email, and submits.
echo $from2 = "An email has been sent to: " . $_POST['email_from'];

}

$var = '

<div class="select-location-page">
      <h2>Where should we meet you?</h2>
      <p class="location-sub-header">Fill out this form and we will meet you within 1 hour!</p>


      <form action="http://www.example.com/mail.php" method="POST" class="location-form">

            <div class="device-details">
              <h2>Device: iPhone5</h2>
              <h2>Repair Cost: $<span id="result">0</span></h2>
            </div>

            <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
            <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
            <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
            <input name="city" type="text" id="city" placeholder="City" maxlength="20">
            <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">

            <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">

            <div class="submit-btn">
                <input type="submit" value="Submit Request from Email" />
            </div>

      </form>

      <script>
        document.getElementById("result").innerHTML = localStorage.getItem("sum");
      </script>

  </div>

';

if(!empty($_POST['email_from']) ){

  ob_start();

    echo $var;

    $output = ob_get_contents();
    ob_end_clean();

    $to = $_POST['email_from']; // Send to the email entered by the user
    $from = "email@example.com"; // This should be YOUR E-mail address

    $subject = "Form submission";

    $message = $output;

    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

    $headers .= "From:" . $from;

  mail($to,$subject,$message,$headers);


}

同样，JavaScript 可能无法正常工作，因此您可能必须考虑其他方法或忽略它。