本教程旨在指导开发者如何在html表单提交后，利用javascript将处理结果动态地显示在表单下方，而非替换表单内容或导致页面刷新。核心策略包括将结果显示区域置于表单外部，并确保通过javascript触发的事件不会触发浏览器默认的表单提交行为。

一、理解表单提交与结果显示机制

在Web开发中，当用户与HTML表单交互并点击提交按钮时，常见的期望是数据能够被处理，并在不刷新整个页面的情况下，将结果动态地展示出来。然而，浏览器对

标签内部的

标签中，并且包含了所有的表单输入字段和提交按钮。这种布局导致 myFunction 执行时，它会替换掉整个表单内容，从而使表单不再可见。

二、核心解决方案：正确放置结果显示区域

要实现将JavaScript处理结果显示在表单下方而不影响表单本身，最根本且有效的方法是将用于显示结果的HTML元素放置在表单之外。这样，JavaScript在修改该元素的内容时，不会触及或覆盖表单的结构和输入字段。

修改后的HTML结构示例：

Javascript

Personuppgifter

Fyll i namn och ålder i formuläret nedan!

Förnamn
Efternamn
Ålder:

在上述修改中，我们创建了一个新的 div 元素，其 id 为 resultDisplay，并将其放置在包含表单的 div 之后。这样，myFunction 就可以安全地将结果写入 resultDisplay，而不会影响表单的可见性和功能。

三、JavaScript逻辑与事件处理

JavaScript函数 myFunction 的主要任务是获取表单输入值并构造需要显示的内容。由于我们将结果显示区域移到了表单外部，myFunction 只需要将内容写入新的目标元素即可。

更新后的JavaScript代码：

// c-uppgift.js
function myFunction() {
    var age = document.getElementById("age").value;
    var lname = document.getElementById("lname").value;
    var fname = document.getElementById("fname").value;

    // 获取新的结果显示区域元素
    var resultDiv = document.getElementById("resultDisplay");

    // 检查是否有输入，避免显示空信息，并提供用户反馈
    if (fname && lname && age) {
        resultDiv.innerHTML = "Mitt namn är " + fname + " " + lname + " och jag är " + age + " år gammal";
    } else {
        resultDiv.innerHTML = "请填写所有信息。";
    }
}

关于阻止默认表单提交行为的补充说明：

如果你的表单按钮是或

示例（如果使用 type="submit" 的按钮）：

// JavaScript (绑定到表单的submit事件)
document.getElementById('personForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为，防止页面刷新

    var age = document.getElementById("age").value;
    var lname = document.getElementById("lname").value;
    var fname = document.getElementById("fname").value;

    var resultDiv = document.getElementById("resultDisplay");

    if (fname && lname && age) {
        resultDiv.innerHTML = "Mitt namn är " + fname + " " + lname + " och jag är " + age + " år gammal";
    } else {
        resultDiv.innerHTML = "请填写所有信息。";
    }
});

在这个例子中，我们将事件监听器绑定到表单的 submit 事件上，并在处理函数中调用 event.preventDefault() 来阻止浏览器执行默认的表单提交操作。

四、CSS样式调整

原有的CSS样式主要用于美化表单元素，大部分可以直接沿用。为了让新的结果显示区域也具有良好的视觉效果，可以为其添加一些基本样式，使其与表单保持一致或形成对比。

CSS代码示例 (style.css)：

h1 {
  text-align: center;
}

#p1 {
  text-align: center;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=number], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  width: 100%;
  background-color: #00a7b9;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover { /* 为按钮添加hover效果 */
  background-color: #008c99; /* 鼠标悬停时颜色稍深 */
}

/* 包含表单的div样式 */
div:has(form) { /* 使用:has()伪类选择器精确控制包含表单的div */
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 250px;
  margin:auto;
}

/* 为新的结果显示区域添加样式 */
#resultDisplay {
  background-color: #e0f7fa; /* 浅蓝色背景 */
  border: 1px solid #b2ebf2; /* 边框 */
  color: #006064; /* 文字颜色 */
  padding: 20px;
  width: 250px;
  margin: 15px auto 0 auto; /* 与表单保持一定距离并居中 */
  border-radius: 5px;
  box-sizing: border-box;
}

#resultDisplay p {
  margin: 0; /* 移除p标签默认外边距 */
  padding: 5px 0;
  line-height: 1.5;
}