JavaScript: Giá trị trả về cho sự kiện

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Đôi khi sự kiện cần trả về một giá trị cần thiết sau khi xử lý xong hành động. Các hành động mặc định của trình duyệt có thể bị "dập tắt" bằng cách trả về giá trị false, hoặc việc submit form sẽ thực hiện được nếu không trả về giá trị false. Ví dụ như nếu sự kiện onSubmit nhận được giá trị khác false từ hàm hay phương thức thì form sẽ được submit tới server.

Ví dụ:

    <html><head><title>An HTML Form and the onSubmit Event
        Handler</title>
    <script language="JavaScript">
1       function checkForm(yourinfo){
2           if(yourinfo.namestring.value == "" ||
                  yourinfo.namestring.value == null){
                  // Check for an empty string or null value
3              alert("Please type in your name");
4              return(false);
            }
            else{
5              return(true);
            }
        }
    </script>
    </head>
    <body>
    <b>
6   <form name="info" action="/cgi-bin/bookstuff/form1.cgi"
        method="post"
7       onSubmit="return checkForm(document.info)"><p>
    <font size="+1"><p>
    Type your name here:
8   <input type="text" name="namestring" size="50">
    <p>
9   <input type="submit" value="Submit">
    <input type="reset" value="Clear">
    </form>
    </body>
    </html>

GIẢI THÍCH

  1. Hàm có tên checkForm() do ta tự định nghĩa có một đối số với tên yourinfo, đối số này nhận tham chiếu là form ở dòng 6.

  2. Nếu người dùng không nhập vào textbox dữ liệu nào thì tức là giá trị nhận được sẽ ở dạng chuỗi rỗng hoặc null. Điều kiện if(yourinfo.namestring.value == "") sẽ có nhiệm vụ check trống.

  3. Nếu người dùng không điền dữ liệu vào trường tương ứng thì một cảnh báo alert() sẽ xuất hiện trên màn hình, và sau khi nhấn nút OK thì người dùng có thể điền lại dữ liệu.

  4. Nếu hàm trả về false thì form sẽ không được submit tới server.

  5. Nếu hàm trả về true thì form sẽ được submit tới server.

  6. Form bắt đầu từ đây, trong đó document.forms[0] chính là form có name="info". Thuộc tính action của form chứa URL của chương trình sẽ nhận form, còn thuộc tính method để xác định cách thực gửi dữ liệu tới server.

  7. Sự kiện onSubmit là thuộc tính của thẻ <form> (chỉ có thẻ <form> mới có thuộc tính này) và được kích hoạt khi người dùng nhấn nút submit (<input type='submit'>). Sự kiện này sẽ gọi tới hàm checkForm(), tham số của hàm này chính là tên của form (document.info) (cũng có thể sử dụng tên mảng tương ứng là document.forms[0]). Từ khóa return được dùng trong trường hợp này để quyết định form có được gửi đi hay không, cụ thể là nếu hàm checkForm() trả về false thì form sẽ không được submit, ngược lại thì form sẽ được submit.

  8. Kiểu của thẻ <input> là text (text field), <input> này có tên là "namestring" và nó có thể chứa một chuỗi dài tới 50 ký tự (điều này là dó thuộc tính size quy định).

  9. Kiểu của thẻ <input> là nút lệnh submit (gửi0, khi người dùng nhấn vào nút này thì sự kiện onSubmit ở dòng 7 được kích hoat.

» Tiếp: onChange
« Trước: Sự kiện tương tự phương thức sự kiện
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!