HTML表单提交后表格仅插入单个单元格问题求助

核心问题点 #

1. Input值获取错误：getData函数中，获取输入框（odds-choice、conf-choice）内容时误用了innerHTML，输入框的用户输入需通过value属性获取，innerHTML无法拿到输入框内容。
2. 表单默认提交干扰：表单设置了action和method="get"，点击submit按钮会触发默认跳转，可能导致localStorage未完成存储就跳转，造成数据丢失。
3. 表格列数不匹配：表格有4列（Game、Pick、Odds、Confidence），但showBets仅插入3个单元格，缺少Game列的内容填充。

修复后的代码 #

1. 表单页面JS与HTML修改 #

修改getData函数，阻止默认跳转并正确获取输入值：

function getData(e) {
    // 阻止表单默认提交跳转
    e.preventDefault();
    
    document.getElementById("popup-1").classList.toggle("active");

    // 正确获取数据：p标签用innerHTML，input用value
    var betChoice = document.getElementById("bet-choice").innerHTML;
    var oddsChoice = document.getElementById("odds-choice").value;
    var confChoice = document.getElementById("conf-choice").value;

    localStorage.setItem("bet", betChoice);
    localStorage.setItem("odds", oddsChoice);
    localStorage.setItem("confidence", confChoice);

    // 手动跳转到目标页面
    window.location.href = "my-picks.html";
}

同时修改submit按钮，传递事件对象：

<button class="submit-btn" onclick="getData(event)">Submit</button>

2. 新页面showBets函数修改 #

补充完整4列单元格的插入与填充：

function showBets() {
    var table = document.getElementById("tbl-upcoming");
    var newRow = table.insertRow(-1);

    // 读取本地存储的数据
    var bet = localStorage.getItem("bet");
    var odds = localStorage.getItem("odds");
    var confidence = localStorage.getItem("confidence");
    // Game列可根据实际需求填充，示例用"未指定"
    var game = "未指定";

    // 插入对应4列的单元格
    var cellGame = newRow.insertCell(0);
    var cellPick = newRow.insertCell(1);
    var cellOdds = newRow.insertCell(2);
    var cellConf = newRow.insertCell(3);

    cellGame.innerHTML = game;
    cellPick.innerHTML = bet;
    cellOdds.innerHTML = odds;
    cellConf.innerHTML = confidence;

    // 可选：插入后清空本地存储，避免重复插入同一数据
    localStorage.removeItem("bet");
    localStorage.removeItem("odds");
    localStorage.removeItem("confidence");
}

额外优化建议 #

• 可将表单数据打包为对象存储，更便于管理：

  // getData中存储对象
  const betData = {
      game: "自定义游戏名称", // 可添加Game输入项
      pick: betChoice,
      odds: oddsChoice,
      confidence: confChoice
  };
  localStorage.setItem("betData", JSON.stringify(betData));
  
  // showBets中读取
  const betData = JSON.parse(localStorage.getItem("betData"));
  

• 增加输入校验，确保必填项不为空再执行存储与跳转。

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