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
06
World wide offices
12+
Years of Experience
05
Agile Coaches
14
Certified Scrum Masters
1000+
Clients projects
1458
Happy customers
- About Us
-
Services
-
AI/ML
- AI Consulting
- Generative AI
- AI Development
- Computer Vision
- NLP
- AI And ML Services
- LLM Development
- Adaptive AI
- ML Consulting
- Deep Learning
- Tensorflow Development
- ML Development
Artificial Intelligence
Machine Learning
-
Platforms
- Salesforce Customization
- Salesforce Implementation
- Salesforce Integration
- Salesforce Development
- Salesforce Consulting
- Salesforce Appexchange
- Salesforce CPQ
- Salesforce Data Migration
- Salesforce Managed Services
- Salesforce Staff Augmentation
- Salesforce App Development
- Salesforce Classic To Lightning Migration
- Salesforce Service Cloud
- Salesforce Marketing Cloud
- Salesforce Sales Cloud
- Salesforce Commerce Cloud
- Salesforce Financial Services Cloud
- Salesforce Support
- Microsoft Dynamics Consulting
- Dynamics 365 Implementation
- Dynamics 365 Integration
- Dynamics 365 Customization
- Microsoft Dynamics 365 Support
- SAP Consulting
Salesforce
Microsoft
SAP
- Industries
- Technologies
- Hire Talent
- Portfolio
- Contact Us
- book a 30 min call
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.
Support On Demand!
