如何在PHP中将<div id="result"></div>的值存入input以保存到数据库

先明确你代码里的核心问题： #

1. ID重复：你给<div>和<input>都用了id="result"，HTML里ID必须唯一，浏览器只会识别第一个元素，导致后续操作完全混乱。
2. 时机错误：第二种方法里的赋值代码是在页面加载完成时执行的，但AJAX请求是在输入变化后才返回结果，这时候div里还没有内容，自然赋值为空。
3. 语法错误：直接在input的value里写<div>标签完全无效，value只能是纯文本，不能嵌套HTML。

修正后的完整代码： #

1. 修正HTML结构（确保ID唯一）

<div class="col-md-6">
   <div class="form-floating mb-3">
       <!-- 专门用于显示结果的div -->
       <div id="result-display"></div>
       <!-- 用于提交到数据库的隐藏input，name对应后端接收的字段 -->
       <input type="hidden" class="form-control" name="result" id="result-input" value="">
   </div>
</div>

2. 修改AJAX代码（在请求成功时同步赋值给input）

$(document).ready(function () {
    $("#inv_amount, #units").on("input", function () {
        var inv_amount = $("#inv_amount").val();
        var units = $("#units").val();
        $.ajax({
            type: "POST",
            url: "calculate.php",
            data: {
              inv_amount: inv_amount,
              units: units
            },
            success: function (response) {
                // 更新页面显示的结果
                $("#result-display").html(response);
                // 同时把结果赋值给用于提交的input，trim()去除可能的空格
                $("#result-input").val(response.trim());
            }
        });
    });
});

额外注意事项： #

• 如果calculate.php返回的结果包含HTML标签（比如<span>之类的），而你只需要纯文本值，把response.trim()改成$(response).text().trim()。
• 后端接收数据时，确保用$_POST['result']（对应input的name="result"）来获取值，再存入数据库。

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