调整卡路里计算器：将计算结果存入输入框并提交至MySQL数据库

看起来你需要把自动计算的卡路里计算器改成手动触发计算，然后把结果存入输入框以便提交到MySQL数据库对吧？我帮你梳理下修改步骤，分前端和后端两部分来实现：

首先，我们需要把原来的自动计算逻辑（比如输入框变化就计算）改成点击按钮触发，然后把计算结果放到一个可提交的输入框里。

1. 表单结构调整 #

在你的HTML表单里，添加一个计算按钮和一个结果输入框（设置为只读，避免用户修改）：

<form method="POST" action="your-form-handler.php">
  <!-- 原有表单字段：性别、年龄、体重等 -->
  <div>
    <label>性别:</label>
    <select name="jantina" id="jantina">
      <option value="lelaki">男</option>
      <option value="perempuan">女</option>
    </select>
  </div>
  <div>
    <label>年龄:</label>
    <input type="number" name="umur" id="umur" required>
  </div>
  <div>
    <label>体重(kg):</label>
    <input type="number" step="0.1" name="berat" id="berat" required>
  </div>

  <!-- 新增计算按钮 -->
  <button type="button" onclick="calculateCalories()">计算每日卡路里</button>

  <!-- 结果输入框：readonly防止修改，name属性确保能提交到后端 -->
  <div>
    <label>计算结果:</label>
    <input type="text" name="kalori" id="kalori-result" readonly required>
  </div>

  <!-- 提交到数据库的按钮 -->
  <button type="submit" name="submit">提交记录</button>
</form>

2. JavaScript计算逻辑 #

编写手动触发的计算函数，替换原来的自动计算逻辑，计算完成后把结果赋值给输入框：

function calculateCalories() {
  // 获取表单输入值
  const gender = document.getElementById('jantina').value;
  const age = parseInt(document.getElementById('umur').value);
  const weight = parseFloat(document.getElementById('berat').value);

  // 这里替换成你原来的卡路里计算公式（比如Mifflin-St Jeor方程）
  let calories = 0;
  if (gender === 'lelaki') {
    calories = 10 * weight + 6.25 * age - 5 * age + 5; // 示例公式，根据你的实际逻辑调整
  } else if (gender === 'perempuan') {
    calories = 10 * weight + 6.25 * age - 5 * age - 161;
  }

  // 将结果格式化后存入输入框
  document.getElementById('kalori-result').value = calories.toFixed(2);
}

在你现有的PHP代码基础上，新增接收计算结果的逻辑，并用预处理语句确保数据安全：

<?php
session_start();
include 'dbconnection.php';

if(isset($_POST['submit'])){
  // 获取表单提交的所有数据，包括计算后的卡路里
  $jantina = $_POST['jantina'];
  $umur = $_POST['umur'];
  $berat = $_POST['berat'];
  $kalori = $_POST['kalori']; // 新增：接收计算结果

  // 可选：数据验证，确保输入是有效数值
  if(!is_numeric($umur) || !is_numeric($berat) || !is_numeric($kalori)){
    echo "请输入有效的数值！";
    exit;
  }

  // 插入数据库的预处理语句（防止SQL注入）
  // 假设你的表名为calorie_records，字段对应jantina, umur, berat, kalori
  $sql = "INSERT INTO calorie_records (jantina, umur, berat, kalori) VALUES (?, ?, ?, ?)";
  $stmt = mysqli_prepare($conn, $sql);
  
  // 绑定参数：s=字符串，d=数值（age/weight/calories都是数值）
  mysqli_stmt_bind_param($stmt, "sddd", $jantina, $umur, $berat, $kalori);

  // 执行插入并反馈结果
  if(mysqli_stmt_execute($stmt)){
    echo "卡路里记录已成功保存到数据库！";
  } else {
    echo "保存失败: " . mysqli_error($conn);
  }

  // 关闭语句和连接
  mysqli_stmt_close($stmt);
  mysqli_close($conn);
}
?>

• 确保你的卡路里计算公式和原来的自动计算逻辑完全一致，避免结果偏差。
• 数据库表结构要包含kalori字段（数值类型，比如DECIMAL(10,2)）。
• 建议保留前端和后端的双重数据验证，防止无效数据存入数据库。

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