Ngăn form reload trang trong JavaScript

Mục tiêu: khi user submit form, xử lý sự kiện submit ở client-side và ngăn trình duyệt reload trang.

HTML Form

<form name="formcontact1" action="#"> <input type='text' name='email' size="36" placeholder="Your e-mail :)"/> <input type="submit" name="submit" value="SUBMIT" onclick="ValidateEmail(document.formcontact1.email)" /> </form>

Cách đơn giản và tin cậy: thêm event.preventDefault() ngay đầu hàm xử lý:

function ValidateEmail(event, inputText){ event.preventDefault(); // logic xử lý email }

preventDefault() nói với trình duyệt: ngăn hành vi mặc định (submit + reload), để ta tự xử lý.

Ví dụ hoàn chỉnh

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prevent form reload</title> </head> <body> <form name="formcontact1" action="#"> <input type='text' name='email' size="36" placeholder="Your e-mail :)"/> <input type="submit" name="submit" value="SUBMIT" onclick="ValidateEmail(event, document.formcontact1.email)" /> </form> <script> function ValidateEmail(event, inputText){ event.preventDefault(); // validation logic here } </script> </body> </html>

Lưu ý: Cần truyền event vào handler (onclick="ValidateEmail(event, ...)"). Hiện đại hơn: dùng form.addEventListener('submit', e => { e.preventDefault(); ... }) tách HTML/JS.