PHP - Form doesn't submit $_POST on a Div text

Question

I cannot get this "about_me_container" div in this form to submit the $_POST. I understand divs aren't meant to be used with $_POST so I changed the div into input type="text" and textarea but it still will not work. I also tried to add the text from "about_me_container" to add to the "hidden_about_me" through Javascript. What am I doing wrong? Or can you just point me in the right direction? Thank you

mypage.php

<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        if (isset($_POST['about_me_container']) && $_SESSION['logged_in'] == true) {
            $username = $_SESSION['username'];
            
            echo htmlspecialchars($_POST['about_me_container']);
            
        }
        else 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> 
        <input type="submit" 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");

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

    function editAboutMeText(e) {
        aboutMeContainer.contentEditable = "true";
        //aboutMeContainer.removeAttribute("readonly");
        aboutMeContainer.style.backgroundColor = "white";
        e.preventDefault();
    }

    function okayAboutMeText(e) {
        aboutMeContainer.contentEditable = "false";
        //aboutMeContainer.setAttribute("readonly", "");
        aboutMeContainer.style.backgroundColor = "lightcyan";
        moveHiddenText(e);
        e.preventDefault();
    }
    
    function moveHiddenText(e) {
        hiddenAboutMe.value = aboutMeContainer.innerText;
        e.preventDefault();
    }
}

Answer 1

Your form submission issue likely stems from the "Edit" and "Ok" buttons triggering form submission before the JavaScript can update the hidden input. To fix this, update the hidden input field in the moveHiddenText function and only then allow the form to submit.

Change the type of the "Ok" button to button to prevent it from submitting the form prematurely:

<input type="button" class="mypage_button" id="okay_about_me" value="Ok">

Modify the JavaScript to submit the form manually after updating the hidden input:

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");

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

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

    function okayAboutMeText(e) {
        aboutMeContainer.contentEditable = "false";
        aboutMeContainer.style.backgroundColor = "lightcyan";
        moveHiddenText();
        document.querySelector("#about_me_text").submit();
    }
    
    function moveHiddenText() {
        hiddenAboutMe.value = aboutMeContainer.innerText;
    }
}