PHP生成菜单中，如何向JavaScript函数传递字符串变量实现弹窗编辑

核心问题分析 #

原代码存在以下导致字符串传递失败的关键问题：

1. JavaScript函数存在语法错误（多余的**标记和未闭合的引号）
2. PHP生成的编辑按钮未向updatepopup()传递任何参数
3. 字符串传递时未转义特殊字符（如引号），导致JavaScript语法断裂
4. 每个菜单项重复使用相同的表单IDupdatedata，造成DOM选择冲突

修复后的代码 #

1. 修正JavaScript函数

<script>
function updatepopup(nameStr, discountNum) {
    document.getElementById("updatedata").style.display = "block";
    document.getElementById("fnaam").value = nameStr;
    document.getElementById("fkort").value = discountNum;
}

function closeform() {
    document.getElementById("updatedata").style.display = "none";
}
</script>

2. 重构PHP代码

将弹窗表单改为全局唯一实例（避免重复ID），并正确传递转义后的参数：

<?php
// 全局弹窗表单（放在树形菜单代码之外）
echo '<div id="updatedata" style="display: none;">
    <form method="POST">
        <label for="fnaam">Naam: </label>
        <input type="text" id="fnaam" name="fnaam">

        <label for="fkort">Korting</label>
        <input type="number" id="fkort" name="fkort">
        
        <button type="button" onclick="closeform()">X</button>
        <button type="submit">Opslaan</button>
    </form>
</div>';

// 树形菜单生成代码
echo '<ol class="tree">';
// ... 你的树形菜单递归逻辑 ...
    echo '<li>
        <label for="subfolder2">' . $category['name'] . '</label>
        <label> ' . $category['discount'] . '%</label>
        <input type="checkbox" name="subfolder2">

        <!-- 编辑按钮：传递转义后的字符串和数值 -->
        <button onclick="updatepopup(\'' . htmlspecialchars($category['name'], ENT_QUOTES) . '\', ' . $category['discount'] . ')">
            <i class="fa-solid fa-pen-to-square"></i>
        </button>
    </li>';
// ... 剩余递归代码 ...
echo '</ol>';
?>

关键修复点说明 #

• 转义字符串：使用htmlspecialchars($category['name'], ENT_QUOTES)转义字符串中的单/双引号，避免破坏JavaScript语法结构
• 唯一DOM ID：将弹窗表单改为全局唯一，确保getElementById能正确定位元素
• 正确传递参数：调用updatepopup()时，字符串参数用单引号包裹，数值直接传递
• 修正JS语法：移除原函数中的错误标记和未闭合引号

内容的提问来源于stack exchange，提问作者jan-peter Poppe