PHP表单无法提交contenteditable div内容至$_POST的求助

核心问题点 #

1. Edit按钮类型错误：Edit按钮设为submit类型，点击会触发表单提交，但它仅用于切换编辑状态，无需提交表单。
2. 表单提交被阻止：Ok按钮的事件处理中多次调用e.preventDefault()，导致表单根本未提交，PHP自然接收不到POST数据。
3. Session未初始化：PHP代码使用$_SESSION但未调用session_start()，会导致登录状态验证失效。
4. 无效的POST参数检查：<div>元素没有name属性，永远不会被包含在POST请求中，检查$_POST['about_me_container']完全无效。

修正后的代码 #

mypage.php

<?php
session_start(); // 必须先启动Session
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // 仅处理隐藏域的提交，删除无效的about_me_container检查
    if (isset($_POST['hidden_about_me']) && $_SESSION['logged_in'] == true) {
        $username = $_SESSION['username'];
        echo htmlspecialchars($_POST['hidden_about_me']);
    }
}
?>

<form id="about_me_text" action="mypage.php" method="post">
    <div id="about_me_title_row"> 
        <label for="about_me_label"><h3>About Me</h3></label> 
        <!-- 将Edit按钮改为button类型，避免触发表单提交 -->
        <input type="button" class="mypage_button" id="edit_about_me" value="Edit">
        <input type="submit" class="mypage_button" id="okay_about_me" value="Ok">
    </div>

    <div class="about_me_flex">
    <div id="about_me_containment">
        <div id="about_me_container" contenteditable="false"></div>
        <input type="hidden" name="hidden_about_me" id="hidden_about_me" value=""/>
    </div>
</form>

mypage.js

window.onload = function() {
    let editAboutMe = document.querySelector("#edit_about_me");
    let okayAboutMe = document.querySelector("#okay_about_me");
    let aboutMeContainer = document.querySelector("#about_me_container");
    let hiddenAboutMe = document.querySelector("#hidden_about_me");
    let aboutMeForm = document.querySelector("#about_me_text");

    editAboutMe.addEventListener("click", editAboutMeText);
    okayAboutMe.addEventListener("click", okayAboutMeText);

    function editAboutMeText() {
        aboutMeContainer.contentEditable = "true";
        aboutMeContainer.style.backgroundColor = "white";
    }

    function okayAboutMeText(e) {
        e.preventDefault(); // 先阻止默认提交，确保值同步完成
        aboutMeContainer.contentEditable = "false";
        aboutMeContainer.style.backgroundColor = "lightcyan";
        // 同步div内容到隐藏域
        hiddenAboutMe.value = aboutMeContainer.innerText;
        // 手动提交表单
        aboutMeForm.submit();
    }
}

额外说明 #

• 使用innerText会获取纯文本内容，如果需要保留HTML格式，可以改为innerHTML，但注意在PHP处理时要做好XSS防护（比如使用htmlspecialchars）。
• 确保用户登录状态的$_SESSION['logged_in']和$_SESSION['username']已经在其他地方正确初始化。

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