如何在表单提交时将JS变量total_cost传递至PHP文件？

我来帮你搞定这个问题，其实有几种简单靠谱的方法可以把JS里的total_cost传递给saveConfig.php，下面给你详细拆解：

方法一：添加隐藏输入框（最直接的表单提交方式） #

这是最适合你现有代码结构的方案，利用表单提交时会携带所有表单元素的特性，把total_cost存到一个隐藏的输入框里一起提交。

步骤1：在表单内添加隐藏输入框 #

在你的<form>标签里，任意位置加入一个隐藏的input元素：

<form action="saveConfig.php" class="hide-submit" method="post">
  <!-- 新增隐藏输入框 -->
  <input type="hidden" name="total_cost" id="total_cost_input">
  
  <!-- 原有的按钮、单选框、下拉框代码保持不变 -->
  <div class="btn-configure step2button">
    <span class="pcButtonText"> Save </span>
  </div>
  <!-- ... 其他表单内容 ... -->
</form>

步骤2：在updateTotal函数中更新隐藏输入框的值 #

每次计算出total_cost后，把它赋值给这个隐藏输入框：

let buildcost = 25.00;
function updateTotal() {
  let radios = document.getElementsByName('config-prod');
  let select = document.getElementById('plist');
  let partcost = 0;
  for (let i = 0, j = radios.length; i < j; i++) {
    if (radios[i].checked) {
      partcost = parseFloat(radios[i].value);
      break;
    }
  }
  partcost += parseFloat(select.options[select.selectedIndex].value);
  let total_cost = buildcost + partcost;
  
  // 同时更新显示用的input和隐藏输入框
  document.getElementById('total').value = total_cost.toFixed(2);
  document.getElementById('total_cost_input').value = total_cost.toFixed(2);
}

步骤3：让Save按钮触发表单提交 #

你的Save按钮是<div>，需要给它添加点击事件来提交表单：

<div class="btn-configure step2button" onclick="document.querySelector('form').submit();">
  <span class="pcButtonText"> Save </span>
</div>

这样当用户点击Save时，表单会把单选框、下拉框的选中值，以及total_cost一起POST到saveConfig.php，你在PHP里可以用$_POST['total_cost']拿到这个值。

方法二：用AJAX无刷新提交（更灵活的方式） #

如果希望页面不刷新就能完成保存，可以用AJAX来发送数据，这种方式用户体验更好。

步骤1：修改Save按钮的点击事件 #

给Save按钮添加事件监听，手动构造表单数据并发送请求：

let buildcost = 25.00;
function updateTotal() {
  // 原有的计算逻辑保持不变
  let radios = document.getElementsByName('config-prod');
  let select = document.getElementById('plist');
  let partcost = 0;
  for (let i = 0, j = radios.length; i < j; i++) {
    if (radios[i].checked) {
      partcost = parseFloat(radios[i].value);
      break;
    }
  }
  partcost += parseFloat(select.options[select.selectedIndex].value);
  let total_cost = buildcost + partcost;
  document.getElementById('total').value = total_cost.toFixed(2);
}

// 添加Save按钮的点击事件
document.querySelector('.btn-configure.step2button').addEventListener('click', function() {
  // 获取表单元素
  const form = document.querySelector('form');
  // 构造FormData对象，自动包含表单里的单选、下拉值
  const formData = new FormData(form);
  
  // 获取当前计算好的total_cost（也可以直接从#total输入框取）
  const total_cost = parseFloat(document.getElementById('total').value);
  // 把total_cost添加到FormData中
  formData.append('total_cost', total_cost);
  
  // 发送POST请求到saveConfig.php
  fetch('saveConfig.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    console.log('保存成功:', data);
    // 这里可以添加成功提示，比如弹出弹窗或页面提示
  })
  .catch(error => {
    console.error('保存出错:', error);
    // 处理错误情况
  });
});

重要提醒：后端验证不可少 #

不管用哪种方法，都不要完全信任前端传递的total_cost，因为用户可以通过浏览器控制台篡改这个值。建议在saveConfig.php里重新计算一次总成本：

<?php
// 获取表单提交的单选和下拉值
$config_prod = $_POST['config-prod'];
$partlist = $_POST['partlist'];

// 从后端获取固定成本（不要依赖前端的25.00，避免被篡改）
$buildcost = 25.00; 

// 重新计算总成本
$total_cost = $buildcost + floatval($config_prod) + floatval($partlist);

// 然后将$config_prod、$partlist、$total_cost存入数据库
// 示例（假设用PDO连接数据库）：
// $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'pass');
// $stmt = $pdo->prepare("INSERT INTO configs (config_prod, partlist, total_cost) VALUES (?, ?, ?)");
// $stmt->execute([$config_prod, $partlist, $total_cost]);
?>

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