如何在JavaScript动态生成的HTML输入框中嵌入PHP变量？

问题核心分析 #

你遇到的问题本质是服务器端PHP代码和客户端JavaScript代码的执行顺序差异：PHP在服务器端运行，会把页面中的PHP标签解析成实际值后再发送给浏览器；而JavaScript是在浏览器端运行的，如果你把PHP代码直接写在JS拼接的字符串里，服务器不会解析这段嵌套的PHP代码——它会把<?php echo $outcome->id; ?>当作普通文本发送给浏览器，所以提交后自然会输出未解析的原代码。

解决方案 #

我们需要先让服务器解析出$outcome->id的实际值，再传递给JavaScript使用，这里提供两种常用方法：

方法1：先将PHP变量赋值给JS变量

在页面的<script>标签开头，先让服务器解析PHP变量并赋值给一个JS变量，之后在动态生成HTML时直接使用这个JS变量：

<!-- HTML部分 -->
<button type="button" class="btn add_field_button"> <i class="fa fa-plus" aria-hidden="true"></i>Add More Fields </button>
<div class="input_fields_wrap"></div>

<script>
// 服务器端先解析PHP变量，赋值给JS变量（用json_encode处理特殊字符，避免语法错误）
const outcomeId = <?php echo json_encode($outcome->id); ?>;

var max_fields = 10;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var new_fields = 19;
var x = 1;

$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++;
        new_fields++;
        // 用模板字符串拼接HTML，直接使用outcomeId变量
        $(wrapper).append(`<div class="row">
            <input type="text" name="outcome[${new_fields}][${x}][id]" value="${outcomeId}" class="form-control" hidden>
            <div class="form-group col-lg-4">
                <label class="form-control-label text-muted ">*Officer's Name:</label>
                <input type="text" name="outcome[${new_fields}][${x}][officer]" class="form-control" required>
            </div>
            <div class="col-lg-4 form-group-sub">
                <label class="form-control-label text-muted">*Position:</label>
                <input type="text" name="outcome[${new_fields}][${x}][position]" class="form-control" required>
            </div>
            <div class="col-lg-3 form-group-sub">
                <label class="form-control-label text-muted">*Institution Name:</label>
                <select class="form-control" name="outcome[${new_fields}][${x}][institution]" required>
                    <option value="">Select Institution</option>
                    <option value="option1">First Option</option>
                    <option value="option2">Second Option</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <a href="#" class="remove_field"><i class="fa fa-times" aria-hidden="true"></i></a>
        </div>`);
    }
});

// 补充删除字段的事件监听（你原来的代码里没写，建议加上）
$(wrapper).on("click", ".remove_field", function(e){
    e.preventDefault();
    $(this).closest('.row').remove();
    x--;
});
</script>

方法2：用HTML隐藏元素存储ID

把$outcome->id放在页面的隐藏元素中，再通过JavaScript读取这个元素的值：

<!-- HTML部分，新增隐藏元素存储ID -->
<button type="button" class="btn add_field_button"> <i class="fa fa-plus" aria-hidden="true"></i>Add More Fields </button>
<input type="hidden" id="outcome-id" value="<?php echo $outcome->id; ?>">
<div class="input_fields_wrap"></div>

<script>
var max_fields = 10;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var new_fields = 19;
var x = 1;
// 从隐藏元素中读取ID
const outcomeId = document.getElementById('outcome-id').value;

// 后续的点击事件代码和方法1一致，直接使用outcomeId变量即可
</script>

关键注意点 #

• 不要直接在JS字符串中嵌套PHP代码：服务器只会解析直接写在PHP标签里的代码，JS字符串中的PHP标签会被当作普通文本处理。
• 使用json_encode转义变量：如果你的ID是字符串类型（比如包含特殊字符、引号），json_encode会自动处理转义，避免JS语法错误。
• 推荐使用模板字符串（反引号``）：相比传统的字符串拼接，模板字符串更易读，也能避免大量的引号转义问题。

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