如何使用JavaScript和PHP实现客户下单后将订单与客户信息发送至邮箱

一、先修复现有页面的代码问题 #

你当前的HTML存在几处会影响功能的错误，需要先修改：

• 重复嵌套form标签：外层已经定义了提交到payscript.php的表单，账单地址区域又嵌套了一层form，属于无效结构，需要删除内层的form标签
• 输入框缺少name属性：PHP无法接收没有name属性的表单参数，所有输入字段都要补全name
• 字段ID重复：姓名和电话的输入框ID都是phonenumber，会导致JS取值异常，需要修改姓名输入框的ID为fullname
• 购物车数据无法随表单提交：购物车的商品列表、总价是渲染在span和table里的，不会默认随表单提交，需要新增隐藏域存储这部分数据
• 下单按钮无提交功能：当前按钮类型是button，点击不会触发表单提交，需要改为submit类型或者绑定点击提交事件

修改后的核心表单代码示例：

<section class="container-fluid">
  <article class="row">
    <div id="mask"></div>
    <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
          </div>
          <!-- 保留外层唯一表单 -->
          <form name="contactform" method="post" action="payscript.php">    
            <div class="modal-body">
              <div class="container">
                <div class="row">
                  <div class="col-md-6 order-md-4 mb-6">
                    <table id="cartents" class="show-cart table"></table>
                    <div>Total price: <span class="total-cart" id="cartContent"></span></div>
                    <!-- 新增隐藏域存储购物车数据和总价 -->
                    <input type="hidden" name="cart_items" id="cart_items" value="">
                    <input type="hidden" name="total_price" id="total_price" value="">
                    <br>
                    <div class="modal-footer">
                      <!-- 按钮改为submit类型 -->
                      <button type="submit" class="btn btn-primary">立即下单</button>
                    </div>
                  </div>
                  <div class="col-md-6 order-md-1">
                    <h4 class="mb-3">账单地址</h4>
                    <!-- 删掉这里原来嵌套的form标签 -->
                    <div class="mb-3">
                      <label for="fullname">姓名</label>
                      <div class="input-group">
                        <!-- 补全name，修改id为fullname -->
                        <input type="text" class="form-control" id="fullname" name="fullname" placeholder="请输入姓名" required>
                        <div class="invalid-feedback" style="width: 100%;">请填写姓名</div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label for="phonenumber">手机号</label>
                      <div class="input-group">
                        <!-- 补全name -->
                        <input type="text" class="form-control" id="phonenumber" name="phonenumber" placeholder="请输入手机号" required>
                        <div class="invalid-feedback" style="width: 100%;">请填写手机号</div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label for="email">邮箱</label>
                      <!-- 补全name -->
                      <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                      <div class="invalid-feedback">请填写有效邮箱用于接收物流通知</div>
                    </div>
                    <div class="mb-3">
                      <label for="address">收货地址</label>
                      <!-- 补全name -->
                      <input type="text" class="form-control" id="address" name="address" placeholder="请输入收货地址" required>
                      <div class="invalid-feedback">请填写收货地址</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form> 
        </div>
      </div>
    </div>
  </article>
</section>

二、前端JavaScript逻辑处理 #

你需要在表单提交前，把购物车数据写入新增的隐藏域中，假设你的购物车数据存在localStorage的cart字段（这是大部分购物车实现的通用存储方式），添加如下JS代码：

// 监听表单提交事件
document.contactform.addEventListener('submit', function(e) {
  // 获取购物车数据，转为JSON字符串存入隐藏域
  const cartData = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : [];
  document.getElementById('cart_items').value = JSON.stringify(cartData);
  // 获取总价存入隐藏域
  document.getElementById('total_price').value = document.querySelector('.total-cart').innerText;
  
  // 这里可以加自定义表单校验逻辑，校验通过就放行提交，不通过就e.preventDefault()阻止提交
}, false);

三、后端PHP（payscript.php）处理逻辑 #

在payscript.php中接收表单参数，拼接邮件内容后发送到你的邮箱，代码示例如下：

<?php
// 1. 接收表单参数，做基础过滤
$fullname = htmlspecialchars(trim($_POST['fullname']));
$phonenumber = htmlspecialchars(trim($_POST['phonenumber']));
$email = htmlspecialchars(trim($_POST['email']));
$address = htmlspecialchars(trim($_POST['address']));
$cartItems = json_decode($_POST['cart_items'], true);
$totalPrice = htmlspecialchars(trim($_POST['total_price']));

// 2. 拼接邮件内容
$to = '你的邮箱地址@xxx.com'; // 替换为你要收信的邮箱
$subject = '新订单通知';
$body = "收到新订单，信息如下：\n\n";
$body .= "客户姓名：{$fullname}\n";
$body .= "联系电话：{$phonenumber}\n";
$body .= "联系邮箱：{$email}\n";
$body .= "收货地址：{$address}\n";
$body .= "订单总价：{$totalPrice}\n";
$body .= "商品明细：\n";
foreach ($cartItems as $item) {
  // 这里的name/price/quantity对应你购物车数据的字段，按实际结构修改
  $body .= "商品名：{$item['name']}，单价：{$item['price']}，数量：{$item['quantity']}\n";
}
$headers = "From: 订单通知 <no-reply@你的域名.com>\r\n";
$headers .= "Reply-To: {$email}\r\n";
$headers .= "Content-Type: text/plain; charset=utf-8\r\n";

// 3. 发送邮件
if (mail($to, $subject, $body, $headers)) {
  // 发送成功提示，可跳转到成功页
  echo "<script>alert('订单提交成功！我们会尽快联系你');location.href='/'</script>";
  // 可选：清空用户本地购物车
  echo "<script>localStorage.removeItem('cart')</script>";
} else {
  // 发送失败提示
  echo "<script>alert('订单提交失败，请重试');history.back()</script>";
}
?>

注意：如果你的服务器不支持内置的mail()函数，可以改用PHPMailer类配置SMTP发送邮件，配置方法可自行搜索相关教程。

内容的提问来源于stack exchange，提问作者Sumit Dhawan