Submitting a form triggers an automatic refresh of the page

background

In order to implement a test page to the js script, I wrote a form with a submit button. When the submit button is clicked, the page refresh is triggered every time, so that I have not seen my test results in the page element that displays the results (the function code is written in the delayed execution function setTimeout), and the page is reloaded.

page description

My page contains a form with a legend title, two input boxes, a submit confirmation button, and a div block element that displays test results.

the code

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

Method 1 Set the onsubmit event of the form to "return false"

principle

The onsubmit event of the form object is similar to onclick. It processes the called function first, and then judges whether the form jumps to a Boolean value.

1. οnsubmit="return true" is the default form submission event
2. οnsubmit="return false" is to prevent form submission events

Notice

The object of the onsubmit event is the form form, so adding the onsubmit event to the submit button has no effect

the code

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

Method 2 event blocking

principle

In the event handler processing function of the form form submit event, add event.preventDefault(); to prevent the event

the code

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