Hướng dẫn onchange trong javascript

Sự kiện onChange sẽ được kích hoạt khi ta có sự lựa chọn một danh sách menu chọn hoặc khi ta thay đổi nội dung của một đối tượng nào đó như input, select, textarea rồi rời đi (blur).

Ví dụ 1:





Demo thẻ select-option: options



   
   
   


Ví dụ 2:

Ví dụ này sẽ áp dụng sự kiện onChange để tạo một Jump Menu, theo đó sẽ có một danh sách xổ xuống để người dùng chọn lựa các ngôn ngữ, khi người dùng chọn ngôn ngữ xong thì onChange sẽ điều hướng tới trang web tương ứng với ngôn ngữ đã chọn.





Demo thẻ select-option: Jump Menu



   
   


Ví dụ 3:

Ví dụ này cũng tạo một Jump Menu như Ví dụ 2 nhưng trang web được mở ra ở một cửa sổ mới.





Demo thẻ select-option: Jump Menu



   
     id="ngonngu" name="ngonngu" onChange="window.open(options[selectedIndex].value,'')">
       
       
       
       
       
       
       
       
   


Ví dụ 4:

Ví dụ này sẽ viết code JavaScript ngay tại sự kiện mà không gọi đến hàm xử lý.

   

    onChange Event Handler
    
   

   

1  

        Vui lòng nhập vào một cấp:

2      

3       if(grade < 0 || grade > 100){

           alert('Cấp phải từ 0 đến 100!');

         }

4       else{

           confirm('Có phải cấp là '+ grade + '?');

         }

         " >

6  

   

   

GIẢI THÍCH

1. Điểm bắt đầu của form.

2. Kiểu của thẻ là text field. Sự kiện sẽ được kích hoạt khi người dùng điền dữ liệu vào input này và rời khỏi nó.

    Ở đây thay vì gán gọi một hàm để xử lý sự kiện thì ta đưa vào các cấu lệnh JavaScript, những câu lệnh này có nhiệm vụ chuyển dữ liệu của input sang kiểu số nguyên và thực hiện các thao tác tiếp theo. Có một lưu ý là thường thì việc viết các câu lệnh trong một hàm sẽ ít gây ra lỗi hơn cách thức viết trực tiếp trong sự kiện.

3. Nếu giá trị nhập vào không nằm trong đoạn [0,100] thì một hộp thông báo alert sẽ xuất hiện.

4. Nếu giá trị nhập vào đúng theo yêu cầu (trong đoạn [0,100]) thì một hộp thoại confirm xuất hiện để xác nhận giá trị nhập vào đó.

5. Dấu nháy kép này đánh dấu sự kết thúc của khối lệnh JavaScript đặt trong sự kiện, dấu > đánh dấu sự kết thúc của thẻ .

6. Thẻ đóng của form.