主表单提交会刷新页面，如何通过JS单独提交指定的城市与事件字段？

核心问题修复 #

• HTML标准明确禁止表单嵌套，这是你之前提交事件冲突的根因，直接废弃嵌套表单的方案。
• 你代码里的window.location.reload()是页面刷新、已填内容丢失的直接原因，提交事件成功后不需要刷新页面，仅清空事件输入框即可。

步骤1：调整HTML结构 #

把事件相关的输入框和提交按钮放在主表单内的普通容器中，独立按钮强制设置type="button"，避免触发主表单默认提交行为：

<!-- 原有主表单 -->
<form id="city-main-form">
  <!-- 原有主表单字段 -->
  <input type="text" id="city-name" name="city_name" placeholder="输入城市名称">
  <input type="text" name="address" placeholder="输入详细地址">
  <!-- 其他主表单字段... -->

  <!-- 新增事件区域 无需嵌套form -->
  <div class="event-add-area">
    <input type="text" id="project-event-name" placeholder="输入事件名称">
    <input type="date" id="project-event-date">
    <!-- 重点：type设置为button 不会触发主表单submit -->
    <button type="button" id="add-event-btn">新增事件</button>
  </div>

  <!-- 主表单原有提交按钮 -->
  <button type="submit">提交城市主信息</button>
</form>

步骤2：修改JS逻辑 #

给独立按钮绑定click事件，提交成功后仅清空事件输入框，保留主表单已填内容：

const addEventBtn = document.getElementById("add-event-btn");
addEventBtn.addEventListener("click", function () {
    // 字段校验
    const e_cityname = document.getElementById("city-name").value.trim();
    const e_eventname = document.getElementById("project-event-name").value.trim();
    const e_eventdate = document.getElementById("project-event-date").value.trim();
    if (!e_cityname || !e_eventname || !e_eventdate) {
        alert("请完善城市名称、事件名称和事件日期");
        return;
    }

    const csrftoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
    const formdata = new FormData();
    formdata.append("city_name", e_cityname);
    formdata.append("event_name", e_eventname);
    formdata.append("event_date", e_eventdate);

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/apps/add_event");
    xhr.setRequestHeader("X-CSRFToken", csrftoken);
    xhr.onload = () => {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 提交成功仅清空事件字段，保留主表单已填内容
            document.getElementById("project-event-name").value = "";
            document.getElementById("project-event-date").value = "";
            alert("事件添加成功，可继续添加下一条");
            // 可扩展：此处添加逻辑渲染已添加的事件列表，方便用户核对
        } else {
            alert("事件添加失败，请重试");
        }
    };
    xhr.send(formdata);
});

可选兼容方案 #

如果业务要求事件区域必须用form标签包裹，不要将该form嵌套在主表单内部，可放在主表单外通过CSS调整到目标页面位置，即可完全避免提交事件冒泡冲突。

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