Giả sử những gì chúng tôi cần đạt được là khi người dùng gửi biểu mẫu HTML này, chúng tôi xử lý sự kiện gửi ở phía máy khách và ngăn trình duyệt tải lại ngay sau khi biểu mẫu được gửi
Biểu mẫu HTML
<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>
Bây giờ, cách dễ nhất và đáng tin cậy nhất để làm như vậy là điều chỉnh hàm ValidateEmail () của chúng tôi để đưa dòng sau vào ngay đầu định nghĩa của nó -
function ValidateEmail(event, inputText){
event.preventDefault();
//remaining function logic goes here
} Điều ngăn chặnDefault () làm là nó ra lệnh cho trình duyệt ngăn chặn hành vi mặc định của nó và cho phép xử lý sự kiện gửi biểu mẫu ở phía máy khách.
Mã HTML đầy đủ cho điều này là -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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(document.formcontact1.email)"
/>
</form>
<script>
{
function ValidateEmail(event, inputText){
event.preventDefault();
//remaining function logic goes here
}
}
</script>
</body>
</html>