AJAX更新innerHTML后表单无法提交，修改后数据未定义求助

核心问题1：workDone未定义 #

你修改后的AJAX代码里，获取文本框值的写法有误：$(workDone)是把未定义的变量workDone当作选择器，自然拿不到值。

正确写法是通过选择器定位目标textarea：

var workDone = $('textarea[name="workDone"]').val();

或者限定在目标表单内，更精准：

var workDone = $('#form textarea[name="workDone"]').val();

核心问题2：表单默认提交行为干扰 #

改用click事件委托后，按钮的默认表单提交行为仍会触发，导致页面刷新，AJAX请求可能被中断，这也是你觉得表单无法提交的原因之一。需要在事件里阻止默认行为：

修改后的完整代码：

$(document).on('click','[name=add]',function(event) {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
  
  var workDone = $('#form textarea[name="workDone"]').val();
  $.ajax({
    type: 'POST',
    url: 'pra.php',
    data: { workDone: workDone },
    success: function(response) {
      document.getElementById("returnvalue").innerHTML=response;
    },
    error: function(xhr, status, error) {
      console.log('AJAX request error:');
      console.log('Status:', status);
      console.log('Error:', error);
    }
  });
});

额外说明：原表单无法提交的原因 #

第一个AJAX成功后更新了returnvalue的innerHTML，如果第二个表单正好在这个元素内部，更新后原表单会被新DOM结构替换，原本绑定的提交事件就失效了。用事件委托（绑定在document上）是正确的做法，能确保新渲染的按钮依然能触发事件。

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