异步提交Tweet表单时无法获取textarea值的问题求助

解决方案 #

方法1：提前捕获文本框值 #

在发送请求前就获取textarea的值并保存到变量中，避免请求完成后DOM元素被修改或移除导致无法获取：

tweetForm.addEventListener('submit', function(event) {
  event.preventDefault();

  // 提前捕获文本框值，此时DOM元素肯定存在
  const tweetInput = document.getElementById("post-content");
  const tweet = tweetInput.value;
  // 同时捕获其他需要的变量（如tweetImage、username）

  const csrftoken = getCookie('csrftoken');
  const formData = new FormData(tweetForm);
  fetch("/post_tweet/", {
    method: "POST",
    body: formData,
    headers: {
      'X-CSRFToken': csrftoken,
    },
  })
  .then(response => response.json())
  .then(data => {
    console.log(data.message);

    // 使用提前保存的tweet变量
    addPostToPage(tweet, tweetImage, username);
  })
  .catch(error => {
    console.log(error);
  }); 
});

方法2：从FormData中提取值 #

既然已经通过FormData收集了表单数据，可以直接从其中获取textarea的值，无需再次查询DOM：

tweetForm.addEventListener('submit', function(event) {
  event.preventDefault();

  const csrftoken = getCookie('csrftoken');
  const formData = new FormData(tweetForm);
  // 从FormData中获取textarea的值（对应name属性为"tweet"）
  const tweet = formData.get('tweet');

  fetch("/post_tweet/", {
    method: "POST",
    body: formData,
    headers: {
      'X-CSRFToken': csrftoken,
    },
  })
  .then(response => response.json())
  .then(data => {
    console.log(data.message);

    addPostToPage(tweet, tweetImage, username);
  })
  .catch(error => {
    console.log(error);
  }); 
});

问题原因 #

你当前代码中在fetch的then块里获取textarea值时返回null，大概率是因为请求完成后DOM结构已被修改（比如表单被重置、元素被移除或替换），导致document.getElementById("post-content")找不到对应元素。通过提前捕获值或直接从FormData提取，就能避免这个问题。

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