解决异步表单提交中textarea值获取为空的问题

<form id="tweet-form" method="post">
    <div class="post-section-row">
        <a class="creator" href="{% url 'change_profile' %}"> 
            <img src="{{ user_profile.profile_picture.url }}" class="profile-pic small-post-section" >
        </a>
        <textarea id="post-content" name="tweet" placeholder="What's Happening?" oninput="autoExpand(this); checkCharacterCount(this)"></textarea>
    </div>
    <!-- 其他表单元素，如图片上传、提交按钮等 -->
    <div class="post-section-row">
        <div class="error-message"></div>
        <div class="tweet-actions">
            <label for="picture" title="Upload Picture">
                <span class="material-symbols-outlined">photo_library</span>
                <span class="tooltiptext">Upload Picture</span>
                <input type="file" id="picture" name="tweet-picture" class="file-input" accept="image/jpeg, image/png, image/gif, image/jpg" onchange="previewTweetImage(event)">
            </label>                        
            <input type="submit" id="post-button" value="Post">
        </div>
    </div>
</form>

document.addEventListener('DOMContentLoaded', function() {
    const tweetForm = document.getElementById('tweet-form');

    tweetForm.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 1. 在发送请求前，立即获取 textarea 的值
        const tweetInput = document.getElementById("post-content");
        const tweetContent = tweetInput.value; // 捕获用户输入的推文内容

        // 2. 准备 CSRF token 和 FormData
        const csrftoken = getCookie('csrftoken'); // 假设 getCookie 函数已定义
        const formData = new FormData(tweetForm); // FormData 会自动包含 textarea 的值

        // 可选：如果需要，可以在这里清空 textarea，但 tweetContent 变量已保存了值
        // tweetInput.value = ''; 

        // 3. 发送异步请求
        fetch("/post_tweet/", {
            method: "POST",
            body: formData,
            headers: {
                'X-CSRFToken': csrftoken,
            },
        })
        .then(response => response.json())
        .then(data => {
            console.log(data.message);
            // 4. 在响应后使用之前捕获的 tweetContent 进行 UI 更新
            // 注意：此时不再需要从 DOM 重新获取 tweetInput.value，因为可能已被清空
            addPostToPage(tweetContent, data.tweetImage, data.username); // 假设 data.tweetImage 和 data.username 从服务器返回

            // 成功提交后，清空表单（如果之前没有清空）
            tweetForm.reset(); 
        })
        .catch(error => {
            console.error("Error posting tweet:", error);
            // 处理错误，例如显示错误消息给用户
        });
    });

    // 假设 addPostToPage 函数用于将新推文添加到页面
    function addPostToPage(content, imageUrl, username) {
        console.log("Adding post to page:", content, imageUrl, username);
        // 实现将推文内容、图片和用户名添加到页面UI的逻辑
    }

    // 假设 getCookie 函数用于获取 CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    // 其他函数，如 autoExpand, checkCharacterCount, previewTweetImage 等
});