点击提交按钮后展示HTML表单内容汇总的技术实现问题

你的代码存在语法错误与逻辑缺失，导致无法正常展示完整的表单输入汇总，以下是修正后的完整代码及问题说明：

修正后的HTML代码 #

<form id="myForm">
  <div class="part1">
    <p>
      <label for="vorname">Vorname:</label>
      <input type="text" id="vorname" />
    </p>
    <p>
      <label for="nachname">Nachname:</label>
      <input type="text" id="nachname" />
    </p>
    <p>
      <label for="strasse">Strasse und Hausnummer:</label>
      <input type="text" id="strasse" />
    </p>
    <p>
      <ul class="artikel">
        <li>
          <input type="checkbox" id="checkbox1" value="jacken" />
          <label for="checkbox1">Jacken</label>
        </li>
        <li>
          <input type="checkbox" id="checkbox2" value="hemden" />
          <label for="checkbox2">Hemden</label>
        </li>
      </ul>
    </p>
    <p>
      <label for="optionen">Wählen Sie ein Krisengebiet aus:</label>
      <select id="optionen">
        <option value="option1">Syrien</option>
        <option value="option2">Ukraine</option>
      </select>
    </p>
    <input type="submit" value="Absenden" onclick="showSummary(); return false">
  </div>
</form>
<!-- 新增汇总显示容器，默认隐藏 -->
<div id="zusammenfassung" style="margin-top:20px; padding:10px; border:1px solid #ccc; display:none;"></div>

修正后的JavaScript代码 #

function showSummary() {
  // 获取文本输入框内容
  var vorname = document.getElementById("vorname").value;
  var nachname = document.getElementById("nachname").value;
  var strasse = document.getElementById("strasse").value;
  
  // 初始化汇总文本
  var zusammenfassung = "Vorname: " + vorname + "<br>" +
                        "Nachname: " + nachname + "<br>" +
                        "Straße: " + strasse + "<br><br>";
  
  // 收集所有选中的复选框选项文本
  var selectedCheckboxes = [];
  document.querySelectorAll('.artikel input[type="checkbox"]:checked').forEach(function(checkbox) {
    var labelText = document.querySelector('label[for="' + checkbox.id + '"]').textContent;
    selectedCheckboxes.push(labelText);
  });
  zusammenfassung += "Ausgewählte Artikel: " + (selectedCheckboxes.length > 0 ? selectedCheckboxes.join(", ") : "Keine") + "<br><br>";
  
  // 获取下拉菜单选中的显示文本
  var selectElement = document.getElementById("optionen");
  var selectedRegion = selectElement.options[selectElement.selectedIndex].text;
  zusammenfassung += "Ausgewähltes Krisengebiet: " + selectedRegion;
  
  // 显示汇总内容
  var summaryContainer = document.getElementById("zusammenfassung");
  summaryContainer.innerHTML = zusammenfassung;
  summaryContainer.style.display = "block";
}

关键修复点说明 #

• HTML语法修正：

  • 修复了<label>标签的闭合错误（如原代码中的</label<）
  • 移除了<select>内部错误添加的<br>标签并正确闭合<select>
  • 补充了用于展示汇总的id="zusammenfassung"容器，默认隐藏，提交后显示
  • 修正了复选框<label>的for属性，使其与对应复选框的id匹配

• JavaScript逻辑补全：

  • 新增了复选框选中状态的处理逻辑，收集并展示所有选中的选项文本
  • 调整下拉菜单的取值逻辑，展示用户可见的选项文本（如"Syrien"）而非后台value值
  • 将复选框、下拉菜单的内容拼接进汇总文本
  • 补充了汇总容器的显示控制逻辑

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