提交表单触发页面自动刷新的问题

背景

为了向js脚本实现一个测试页面，随手写了一个带提交按钮的表单，遇到了点击提交按钮时，每次都会触发页面刷新，以至于我还没有在显示结果的页面元素（函数代码写在延迟执行函数setTimeout里）看到我的测试结果，页面就被重新加载了。

页面描述

我的页面包含一个带legend标题，包含两个input输入框，和一个submit确认按钮的form表单，以及一个显示测试结果的div块状元素。

代码

<form>
    <fieldset>
        <legend>Please add CPU Load record</legend>
        Interval (in miliseconds)：<br>
        <input id = 'interval' type = "text" /><br>
        Record for CPU Load：<br>
        <input id = 'record' type = "text" /><br><br>
        <input type = "submit" value = "Submit">
    </fieldset>
</form>

方法一 设置表单的onsubmit事件为"return false"

原理

form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断

1. οnsubmit=“return true” 为默认的表单提交事件
2. οnsubmit="return false"为阻止表单提交事件

注意

onsubmit 事件作用对象是form表单，所以把onsubmit事件加在提交按钮上是没效果的

代码

<form onsubmit="return false;">
    <fieldset>
        <legend>Please add CPU Load record</legend>
        Interval (in miliseconds)：<br>
        <input id = 'interval' type = "text" /><br>
        Record for CPU Load：<br>
        <input id = 'record' type = "text" /><br><br>
        <input type = "submit" value = "Submit">
    </fieldset>
</form>

方法二 事件阻止

原理

在form表单sumbit提交事件的event handler处理函数中，添加event.preventDefault(); 来阻止事件

代码

document.querySelector('form').addEventListener('submit', function(event) {
        
        /*
            do someting to handle form input
        */
        event.preventDefault();
    })