如何将数据库获取的两个echo结果求和并显示在文本框中

方法一：后端PHP直接计算求和 #

在查询数据库时直接计算两个字段的和，再渲染到结果文本框中，同时优化查询逻辑避免安全风险：

<?php 
$con = mysqli_connect("localhost","root","","loan_db");

$stud_id = $_POST['borrower_id'];

// 使用预处理语句防止SQL注入，仅查询需要的字段提升性能
$query = "SELECT soil_value, land_extent FROM borrowers WHERE id=?";
$stmt = mysqli_prepare($con, $query);
mysqli_stmt_bind_param($stmt, "i", $stud_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

if(mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    // 强制转换为浮点型，处理空值或非数字情况
    $sum = (float)$row['soil_value'] + (float)$row['land_extent'];
?>

<label style="color: #1b78c9"><b>土壤类型价值</b></label>
<input type="number" id="soil_value_id" value="<?= $row['soil_value']; ?>" disabled/>

<label style="color: #1b78c9"><b>土地面积</b></label>
<input type="number" id="land_extent_id" value="<?= $row['land_extent']; ?>" disabled/>

<label style="color: #1b78c9"><b>求和结果</b></label>
<input type="number" id="sum_result" value="<?= $sum; ?>" disabled/>

<?php } ?>

方法二：前端JavaScript实时计算求和 #

如果后续需要允许用户修改输入框值并实时更新求和结果，可采用前端JS计算：

<?php 
$con = mysqli_connect("localhost","root","","loan_db");

$stud_id = $_POST['borrower_id'];
// 预处理查询防注入
$query = "SELECT soil_value, land_extent FROM borrowers WHERE id=?";
$stmt = mysqli_prepare($con, $query);
mysqli_stmt_bind_param($stmt, "i", $stud_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

if(mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
?>

<label style="color: #1b78c9"><b>土壤类型价值</b></label>
<input type="number" id="soil_value_id" value="<?= $row['soil_value']; ?>" disabled/>

<label style="color: #1b78c9"><b>土地面积</b></label>
<input type="number" id="land_extent_id" value="<?= $row['land_extent']; ?>" disabled/>

<label style="color: #1b78c9"><b>求和结果</b></label>
<input type="number" id="sum_result" disabled/>

<script>
// 页面加载完成后自动计算求和
window.onload = function() {
    calculateSum();
};

// 定义求和函数，处理空值情况
function calculateSum() {
    const soilValue = parseFloat(document.getElementById('soil_value_id').value) || 0;
    const landExtent = parseFloat(document.getElementById('land_extent_id').value) || 0;
    const sum = soilValue + landExtent;
    document.getElementById('sum_result').value = sum;
}

// 若后续解除输入框禁用，取消下方注释即可实时更新求和
// document.getElementById('soil_value_id').addEventListener('input', calculateSum);
// document.getElementById('land_extent_id').addEventListener('input', calculateSum);
</script>

<?php } ?>

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