如何让HTML表单提交后JS结果显示在表单下方而非新页面？

当然可行，只需对现有代码做两处关键调整即可达成需求：

核心问题分析 #

当前代码存在两个问题导致无法实现预期效果：

• <form>内的<button>默认会触发表单提交行为，点击后页面会跳转刷新；
• 你用id="demo"的元素包裹了整个表单内容，修改它的innerHTML会直接替换掉表单，而非在下方追加结果。

修改步骤 #

1. 阻止表单默认跳转行为 #

可以通过两种方式实现：

• 方式一：修改按钮类型
  将按钮的type设为button，避免它触发表单提交：

  <button type="button" onclick="myFunction()">Skicka</button>
  

• 方式二：在JS中阻止默认事件
  给myFunction添加event参数，调用preventDefault()：

  function myFunction(event) {
    event.preventDefault(); // 阻止页面跳转
    // 原有逻辑...
  }
  

  同时HTML中按钮调用时传入事件：

  <button onclick="myFunction(event)">Skicka</button>
  

2. 单独设置结果显示区域 #

把原有的<p id="demo">从表单内移出，放在表单下方，作为专门的结果展示容器：

<div>
  <form>
    <label for="fname">Förnamn</label>
    <input type="text" id="fname" name="fname" placeholder="Förnamn"><br>      
    <label for="lname">Efternamn</label>
    <input type="text" id="lname" name="lname" placeholder="Efternamn"><br>
    <label for="age">Ålder:</label><br>
    <input type="number" id="age" name="age" placeholder="Ålder"><br>
    <button type="button" onclick="myFunction()">Skicka</button>
  </form>
  <!-- 新增结果显示区域 -->
  <p id="demo"></p>
</div>

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="c-uppgift.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css">
  <title>Javascript</title>
</head>
<body>
  <h1>Personuppgifter</h1>
  <p id="p1">Fyll i namn och ålder i formuläret nedan! </p>

  <div>
    <form>
      <label for="fname">Förnamn</label>
      <input type="text" id="fname" name="fname" placeholder="Förnamn"><br>      
      <label for="lname">Efternamn</label>
      <input type="text" id="lname" name="lname" placeholder="Efternamn"><br>
      <label for="age">Ålder:</label><br>
      <input type="number" id="age" name="age" placeholder="Ålder"><br>
      <button type="button" onclick="myFunction()">Skicka</button>
    </form>
    <p id="demo"></p>
  </div>
  
</body>
</html>

JavaScript代码 #

function myFunction() {
  var age = document.getElementById("age").value;
  var lname = document.getElementById("lname").value;
  var fname = document.getElementById("fname").value;
  document.getElementById("demo").innerHTML = "<p>Mitt namn är " + fname + " " + lname + " och jag är " + age + " år gammal</p>";
}

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

input[type=submit]:hover {
  background-color: #00a7b9;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 250px;
  margin:auto;
}

内容的提问来源于stack exchange，提问作者Pontus Ydström