PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Sự kiện Submit Form trong Javascript

Trong bài này mình sẽ giới thiệu đến các bạn sự kiện submit form trong Javascript, đây là sự kiện giúp bạn kiểm soát được hành động submit form của người dùng khi họ click vào button submit.

Khi gửi dữ liệu lên server thì thường ta phải kiểm tra định dạng dữ liệu mà người dùng nhập vào có phù hợp hay không, điều này giúp giảm tải ở phía server trong một số trường hợp.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Ví dụ bạn tạo một form login, nếu bạn không dùng Javascript để yêu cầu người dùng nhập đủ thông tin tên đăng nhập và mật khẩu thì rất dễ bị họ submit liên tục, điều này tạo ra một sức ép về phía server. Đương nhiên phía server phải rtải qua một bước validate data nữa rồi mới cập nhật vào cơ sở dữ liệu.

1. Khai báo sự kiện submit bằng thẻ HTML form

Thẻ HTML form có sự kiện onsubmit, đây chính là nơi mà bạn gọi đến hàm xử lý trước khi hành động submit xảy ra.

<form method="post" action="" onsubmit="return validate()">

</form>

Lưu ý rằng hàm validate phải trả về kiểu boolean nhé:

  • Trả về true thì cho phép submit form
  • Trả về false thì không submit form

Bạn hãy thử tạo một input submit bên trong thẻ form, sau đó thiết lập code ở onsubmit return false thì khi bạn click vào button submit đó sẽ không có hiệu ứng gì.

<form method="post" action="" onsubmit="return false">
    <input type="submit" value="Submit"/>
</form>

Nhưng khi bạn đổi sang return true thì sẽ có hiệu ứng ngay.

<form method="post" action="" onsubmit="return true">
    <input type="submit" value="Submit"/>
</form>

Tóm lại: Nội dung bên trong hàm validate không quan trọng, mà sự kiện này chỉ quan tâm đến giá trị return true / false của dòng return nằm bên trong sự kiện mà thôi.

2. Gọi đến một hàm Javascript khi submit

Có ba cách để gọi đến một hàm Javascript khi submit form như sau.

Cách 1: Sử dụng HTML như ở phần 1.

<form onsubmit="functionName">

Cách 2: Sử dụng phương thức addEventListener().

formObj.addEventListener("submit", functionName);

Cách 3: Sử dụng thuộc tính onsubmit của đối tượng form.

formObj.onsubmit = function(){functionName};

Khi sử dụng thuộc tính này thì nó sẽ thay thế đoạn code bên trong thuộc tính onsubmit của thẻ form, vì vậy những đoạn mã JS nằm bên trong thẻ form đó sẽ bị thay thể bởi function mà bạn đã gán.

Ví dụ: Mình sử dụng cách hai nhé.

<form method="post" action="" id="myform">
    <input type="submit" value="Submit"/>
</form>
<script>
    document.getElementById('myform').addEventListener('submit', function(){
        alert('Form Submited');
    });
</script>

3. Dùng Javascript để submit form

Ngoài cách sử dụng một thẻ input submit thì bạn cũng có thể sử dụng Javascript để thực hiện một hành động submit form.

Giả sử mình có thẻ input button như sau:

<form method="post" action="" id="myform">
    <input type="button" value="Button"/>
</form>

Nếu click vào button này thì sẽ không xảy ra sự kiện submit form, bởi đây là một button chứ khong phải button submit.

Bây giờ ta sẽ bổ đoạn code khi click vào button đó thì gọi đến phương thức submit() của form để kích hoạt sự kiện.

<form method="post" action="" id="myform">
    <input type="button" onclick="submitForm()" value="Button"/>
</form>
<script>
    function submitForm(){
        document.getElementById('myform').submit();
    }
</script>

Bạn hãy thử click vào button thì sẽ thấy xảy ra sự kiện submit form.

Như vậy là mình đã hướng dẫn xong cách sử dụng Javascript để submit form, cũng như các thao tác thường gặp khi làm việc với form trong Javascript.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top