开发待办应用：如何通过POST请求同时发送表单输入与<h1>父任务名？

嘿，我懂你现在的困扰！作为刚入门的开发者，完全不用搞复杂的框架或者晦涩的逻辑，有几个超简单的办法能解决这个问题👇

方法1：用隐藏表单字段（最推荐，纯HTML就能搞定） #

这是最适合初学者的方案——你只需要在表单里加一个隐藏的输入框，把<h1>里的父任务名称预先填进去，这样提交表单时，这个隐藏字段会和子任务的输入内容一起被发送到后端。

举个静态内容的例子（父任务名称固定）：

<!-- 你的父任务标题 -->
<h1>完成项目报告</h1>

<!-- 提交子任务的表单 -->
<form method="POST" action="/你的提交接口地址">
  <!-- 隐藏字段：存储父任务名称，后端可以通过`parent_task`这个名字获取到它 -->
  <input type="hidden" name="parent_task" value="完成项目报告">
  
  <!-- 子任务输入框 -->
  <input type="text" name="sub_task" placeholder="输入子任务内容...">
  
  <button type="submit">添加子任务</button>
</form>

如果父任务名称是动态生成的（比如从后端渲染过来的），只需要把后端的变量填充到隐藏字段的value属性里就行。比如用PHP的话就是value="<?php echo $parentTaskName; ?>"，完全不用写JS。

要是你的<h1>内容是前端动态修改的（比如用户可以编辑父任务名称），那再加几行超基础的JS就行：

<h1 id="parent-task">完成项目报告</h1>

<form method="POST" action="/你的提交接口地址">
  <input type="hidden" id="parent-hidden" name="parent_task" value="">
  <input type="text" name="sub_task" placeholder="输入子任务内容...">
  <button type="submit">添加子任务</button>
</form>

<script>
// 页面加载完成后，把h1的内容同步到隐藏字段
document.addEventListener('DOMContentLoaded', function() {
  const parentTaskText = document.getElementById('parent-task').textContent.trim();
  document.getElementById('parent-hidden').value = parentTaskText;
});
</script>

这段JS逻辑很直白：获取<h1>的文本内容，然后赋值给隐藏字段，确保提交时带的是最新的父任务名称。

方法2：利用表单提交事件（稍微进阶，但也简单） #

如果你不想用隐藏字段，也可以在表单提交的瞬间，通过JS把<h1>的内容加到提交的数据里。这个方法需要一点点JS，但逻辑也很好理解：

<h1 id="parent-task">完成项目报告</h1>

<form id="sub-task-form" method="POST" action="/你的提交接口地址">
  <input type="text" name="sub_task" placeholder="输入子任务内容...">
  <button type="submit">添加子任务</button>
</form>

<script>
// 给表单绑定提交事件
document.getElementById('sub-task-form').addEventListener('submit', function(e) {
  // 先阻止表单默认的提交行为，我们自己来处理数据
  e.preventDefault();
  
  // 创建FormData对象，自动包含表单里的所有输入内容
  const formData = new FormData(this);
  // 把<h1>里的父任务名称添加到FormData中
  const parentTaskText = document.getElementById('parent-task').textContent.trim();
  formData.append('parent_task', parentTaskText);
  
  // 用fetch API提交表单数据
  fetch(this.action, {
    method: this.method,
    body: formData
  }).then(() => {
    // 提交成功后的处理，比如刷新页面或者提示用户
    window.location.reload();
  });
});
</script>

总结 #

对于初学者来说，方法1绝对是首选——它几乎不需要额外的JS知识，理解成本低，而且兼容性拉满。你只需要把父任务名称“藏”在表单的隐藏字段里，就能轻松实现同时提交两个数据的需求。

内容的提问来源于stack exchange，提问作者Helmut K.