Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

JavaScript

December 21, 2023

HTML Keep Checkbox Checked After Form Submit

The page will refresh after a form submit event and this is the default behavior of HTML forms. Therefore the page will reset to default and the checkbox will be unchecked if you have checked it.

Here’s how you can fix this issue:

Code of index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./script.js"></script>
</head>
<body>
    <div>
        <form onsubmit="onSubmit(event)">
            <input type="checkbox" />
            <span class="text-white">Filter</span>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form>
    </div>
</body>
</html>

Code of script.js:

const onSubmit = (event) => {
    event.preventDefault();
    console.log("on submit called");
}

Explanation

So, when we click on the submit button, the onSubmit() method will be executed. Here, we are passing event object in the argument of onSubmit() method which has a built-in preventDefault() method to prevent page from getting refreshed after form submission.