如何存储计算器表单数据并与联系表单数据一同提交发邮件？

有几种可行的实现方式，具体如下：

方法一：用隐藏表单字段存储计算器数据 #

用户提交计算器表单后，把计算器的输入值和计算结果存入联系表单的隐藏input字段中。这样当用户提交联系表单时，隐藏字段的数据会和联系表单的常规字段一起提交到后端，后端就能一次性获取所有数据来组装邮件。

示例前端代码：

// 监听计算器表单提交事件
document.getElementById('calculator-form').addEventListener('submit', (e) => {
  e.preventDefault();
  
  // 获取计算器输入和结果
  const num1 = document.getElementById('num1').value;
  const num2 = document.getElementById('num2').value;
  const result = parseInt(num1) + parseInt(num2); // 示例计算逻辑
  
  // 显示计算结果和联系表单
  document.getElementById('result-text').textContent = `计算结果：${result}`;
  document.getElementById('contact-form').style.display = 'block';
  
  // 为计算器数据创建隐藏字段并添加到联系表单
  const calcData = { num1, num2, result };
  Object.entries(calcData).forEach(([key, val]) => {
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = `calc_${key}`;
    hiddenInput.value = val;
    document.getElementById('contact-form').appendChild(hiddenInput);
  });
});

后端处理时，只需读取calc_num1、calc_result这类字段，和联系表单的name、email等字段一起拼接成邮件内容即可。

方法二：用LocalStorage暂存计算器数据 #

如果不想修改表单结构，可以在计算器提交时把数据存在浏览器的LocalStorage里，等用户提交联系表单时，再从LocalStorage读取数据并附加到表单提交参数中。

示例代码：

// 计算器提交时存储数据到LocalStorage
document.getElementById('calculator-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const num1 = document.getElementById('num1').value;
  const num2 = document.getElementById('num2').value;
  const result = parseInt(num1) + parseInt(num2);
  
  localStorage.setItem('calcData', JSON.stringify({ num1, num2, result }));
  
  // 显示结果和联系表单
  document.getElementById('result-text').textContent = `计算结果：${result}`;
  document.getElementById('contact-form').style.display = 'block';
});

// 联系表单提交时读取LocalStorage数据并附加
document.getElementById('contact-form').addEventListener('submit', (e) => {
  const savedCalcData = JSON.parse(localStorage.getItem('calcData'));
  if (savedCalcData) {
    // 创建隐藏字段添加到表单
    Object.entries(savedCalcData).forEach(([key, val]) => {
      const hiddenInput = document.createElement('input');
      hiddenInput.type = 'hidden';
      hiddenInput.name = `calc_${key}`;
      hiddenInput.value = val;
      e.target.appendChild(hiddenInput);
    });
    // 提交后清除LocalStorage，避免后续重复提交
    localStorage.removeItem('calcData');
  }
});

方法三：后端会话（Session）存储数据 #

如果是服务端渲染的项目（比如PHP、Node.js + Express），可以在计算器提交时把数据存入用户的Session中。当用户提交联系表单时，后端直接从Session中取出计算器数据，和联系表单数据合并后发送邮件。

示例PHP代码：

// 初始化Session
session_start();

// 处理计算器表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['calc_submit'])) {
  $num1 = $_POST['num1'];
  $num2 = $_POST['num2'];
  $result = $num1 + $num2;
  
  // 存入Session
  $_SESSION['calc_data'] = [
    'num1' => $num1,
    'num2' => $num2,
    'result' => $result
  ];
  
  // 跳转到显示联系表单的页面
  header('Location: contact.php');
  exit;
}

// 处理联系表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_submit'])) {
  // 获取联系表单数据
  $contact_info = [
    'name' => $_POST['name'],
    'email' => $_POST['email'],
    'message' => $_POST['message']
  ];
  
  // 从Session取出计算器数据
  $calc_info = $_SESSION['calc_data'] ?? [];
  
  // 合并所有数据
  $all_data = array_merge($contact_info, $calc_info);
  
  // 组装邮件内容
  $email_body = "用户联系信息：\n";
  foreach ($all_data as $key => $value) {
    $email_body .= ucfirst($key) . ": " . $value . "\n";
  }
  
  // 发送邮件（这里用PHP内置mail函数，实际项目可改用第三方邮件库）
  mail('your-email@example.com', '用户联系与计算器数据', $email_body);
  
  // 清除Session中的计算器数据
  unset($_SESSION['calc_data']);
}

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