JAVASCRIPT
Prevent Default Form Submission
Understand how to intercept and prevent the default browser behavior of a form submission, allowing for custom AJAX submissions or client-side validation.
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents the default form submission
// Add your custom form handling logic here, e.g., AJAX request
console.log('Form submission prevented. Custom logic can now run.');
// Example: Get form data
const formData = new FormData(event.target);
for (let [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
});
How it works: This code snippet demonstrates how to prevent the default behavior of a form submission. By calling `event.preventDefault()` inside the submit event listener, the browser will not reload the page or navigate away, allowing developers to handle the form data with JavaScript, typically for AJAX requests, advanced client-side validation, or single-page application routing.