HTML/JS表单提交后页面自动重置问题排查

我正在创建一个HTML页面，包含两个URL输入框，分别用于输入网站地址和图片URL，提交后会展示对应的链接和图片。但提交后，页面会在显示结果几秒后自动重置；仅单个输入为HTTPS时功能正常，双HTTPS输入时出现该问题，无报错信息，以下是最小复现代码，请问原因是什么？

HTML 文件 #

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>demo</title>
<script type = "text/javascript" src="script.js"></script>
<body>
<form>
<label for="Website" >Website</label>
<input type="url"  id="Website" >
<label for="ImageLink" >Image Link</label>
<input type="url"  id="ImageLink" >
<button type="submit"  onclick="displayDetails()" id="submit">Submit</button>
</form>
<table id="display">
<tr>
    <th>Description</th>
    <th>Image</th>
</tr>
</table>
</body>
</html>

script.js 文件 #

var row  = 1;
var submit = document.getElementById("submit");
submit.addEventListener("submit",displayDetails);

function displayDetails(){
var website = document.getElementById('Website').value;
var imageSrc = document.getElementById('ImageLink').value;
var display = document.getElementById("display");
var Row = display.insertRow(row);
var cell = Row.insertCell(0);
var cell2 = Row.insertCell(1);
web = website.link(website);
cell.innerHTML =  web ;
img  =  document.createElement("img");
img.src = imageSrc;
cell2.appendChild(img);
row++;
}

页面自动重置是因为表单默认的提交行为未被阻止：

• 点击type="submit"按钮时，浏览器会触发表单的默认提交动作，若未指定表单action属性，会刷新当前页面，导致之前添加的内容被清空。
• 单HTTPS输入时看似正常，是因为其中一个输入框未通过type="url"的合法性校验，浏览器自动阻止了表单提交；双HTTPS输入时，两个URL都校验通过，表单默认提交行为触发，页面就会刷新重置。

有两种可行的解决方式：

方式一：阻止表单默认提交行为 #

修改JavaScript代码，监听表单的submit事件并阻止默认行为：

var row  = 1;
// 监听表单的submit事件而非按钮的事件
var form = document.querySelector("form");
form.addEventListener("submit", displayDetails);

function displayDetails(event){
    // 核心：阻止表单默认提交动作
    event.preventDefault();
    
    var website = document.getElementById('Website').value;
    var imageSrc = document.getElementById('ImageLink').value;
    var display = document.getElementById("display");
    var Row = display.insertRow(row);
    var cell = Row.insertCell(0);
    var cell2 = Row.insertCell(1);
    
    web = website.link(website);
    cell.innerHTML = web;
    
    img = document.createElement("img");
    img.src = imageSrc;
    // 可选：限制图片大小避免页面布局混乱
    img.style.maxWidth = "200px";
    cell2.appendChild(img);
    
    row++;
}

方式二：修改按钮类型为普通按钮 #

将按钮的type="submit"改为type="button"，这样点击按钮仅触发自定义逻辑，不会触发表单提交：

<button type="button" onclick="displayDetails()" id="submit">Submit</button>

同时移除JavaScript中多余的事件监听：

var row  = 1;

function displayDetails(){
    var website = document.getElementById('Website').value;
    var imageSrc = document.getElementById('ImageLink').value;
    var display = document.getElementById("display");
    var Row = display.insertRow(row);
    var cell = Row.insertCell(0);
    var cell2 = Row.insertCell(1);
    
    web = website.link(website);
    cell.innerHTML = web;
    
    img = document.createElement("img");
    img.src = imageSrc;
    img.style.maxWidth = "200px";
    cell2.appendChild(img);
    
    row++;
}

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