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

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

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

  
  
  
  
  


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

  

     
      Förnamn
      
      
      Efternamn
      

      Ålder:

      

      
      Skicka 
    
  

  
  

    
  

  

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

三、JavaScript逻辑与事件处理

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

更新后的JavaScript代码：

燕雀Logo

为用户提供LOGO免费设计在线生成服务

下载

// 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 属性时， 默认为 type="submit"），并且你希望通过JavaScript来处理提交逻辑而不刷新页面，你需要显式地阻止其默认行为。这通常通过在事件监听器中使用 event.preventDefault() 方法来实现。

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

    
    Skicka

// 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;
}

注意： 原始CSS中的 div { ... } 规则会应用到所有 div 元素。为了更精确地控制包含表单的 div 和结果显示 div 的样式，建议使用更具体的选择器，例如为包含表单的 div 添加一个类或ID，或者如