添加提交按钮禁用/启用功能后，表单提交数据闪显消失求助

核心原因 #

点击表单的submit按钮时，浏览器会触发默认的表单提交行为，导致页面刷新，刚添加到表格的内容随即被清空。

修复方案 #

方案1：阻止表单默认提交行为 #

修改addData函数，添加阻止默认行为的代码，同时在按钮调用时传递事件参数：

function addData(event) { 
    // 阻止浏览器默认的表单提交刷新行为
    event.preventDefault();

    var rows = "";
    var a = document.getElementById("protein-oatmeal").value;
    var b = document.getElementById("toast-and-eggs").value;
    var c = document.getElementById("gyp").value;
    var d = document.getElementById("pw").value;

    rows += "<td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + d + "</td><td>"+ b + "</td><td>"+ c +"</td><td>"+ a + "</td>";
    var tbody = document.querySelector("#list tbody");
    var tr = document.createElement("tr");

    tr.innerHTML = rows;
    tbody.appendChild(tr);
}

对应修改HTML中的提交按钮：

<input type="submit" id="submitButton" name="submit" onclick="addData(event)">

方案2：改用普通按钮类型 #

将submit类型按钮改为button类型，彻底避免触发默认提交行为：

<input type="button" id="submitButton" name="submit" onclick="addData()">

额外优化建议 #

当前addData函数会直接获取所有复选框的值，不管是否被选中。如果需要只展示用户勾选的选项，可以调整代码如下：

function addData(event) {
    // 若使用submit按钮，需保留此行阻止默认行为
    event.preventDefault();

    // 获取所有被选中的早餐选项
    const selectedItems = Array.from(document.querySelectorAll('input[name="breakies"]:checked'))
                              .map(item => item.value);

    // 将选中项填充到一周7天的单元格中，不足的重复已有选项
    const rowCells = selectedItems.concat(selectedItems.slice(0, 7 - selectedItems.length))
                                  .map(item => `<td>${item}</td>`)
                                  .join('');

    const tbody = document.querySelector("#list tbody");
    const tr = document.createElement("tr");
    tr.innerHTML = rowCells;
    tbody.appendChild(tr);
}

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