JavaScript: onChange
Giải phóng thời gian, khai phóng năng lực
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:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: options</title>
</head>
<body>
<form>
<label for="ngonngu">Mời chọn một ngôn ngữ:</label>
<select id="ngonngu" name="ngonngu" onChange="alert('Ngôn ngữ bạn đã chọn: '+options[selectedIndex].text);">
<option hidden>--Chọn 1 ngôn ngữ--</option>
<option>Ngôn ngữ C</option>
<option>HTML5</option>
<option>CSS3</option>
<option>JavaScript</option>
<option>jQuery</option>
<option>SQL</option>
<option>PHP</option>
</select>
<input type="submit" value="Gửi">
</form>
</body >
</html>
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Jump Menu</title>
</head>
<body>
<form>
<label for="ngonngu">Mời chọn một ngôn ngữ:</label>
<select id="ngonngu" name="ngonngu" onChange="location=options[selectedIndex].value;">
<option hidden>--Chọn 1 ngôn ngữ--</option>
<option value="http://v1study.com/c-gioi-thieu-a32.html">Ngôn ngữ C</option>
<option value="http://v1study.com/html5-gioi-thieu-a43.html">HTML5</option>
<option value="http://v1study.com/css-gioi-thieu-a44.html">CSS3</option>
<option value="http://v1study.com/javascript-js-gioi-thieu-a45.html">JavaScript</option>
<option value="http://v1study.com/jquery-gioi-thieu-a46.html">jQuery</option>
<option value="http://v1study.com/sql-gioi-thieu-a1.html">SQL</option>
<option value="http://v1study.com/php-gioi-thieu-a497.html">PHP</option>
</select>
</form>
</body>
</html>
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Jump Menu</title>
</head>
<body>
<form>
<label for="ngonngu">Mời chọn một ngôn ngữ:</label>
<select id="ngonngu" name="ngonngu" onChange="window.open(options[selectedIndex].value,'')">
<option hidden>--Chọn 1 ngôn ngữ--</option>
<option value="http://v1study.com/c-gioi-thieu-a32.html">Ngôn ngữ C</option>
<option value="http://v1study.com/html5-gioi-thieu-a43.html">HTML5</option>
<option value="http://v1study.com/css-gioi-thieu-a44.html">CSS3</option>
<option value="http://v1study.com/javascript-js-gioi-thieu-a45.html">JavaScript</option>
<option value="http://v1study.com/jquery-gioi-thieu-a46.html">jQuery</option>
<option value="http://v1study.com/sql-gioi-thieu-a1.html">SQL</option>
<option value="http://v1study.com/php-gioi-thieu-a497.html">PHP</option>
</select>
</form>
</body>
</html>
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ý.
<html>
<head><title>onChange Event Handler</title>
<meta charset="utf-8">
</head>
<body>
1 <form>
Vui lòng nhập vào một cấp:
2 <input type="text" onChange="
grade=parseInt(this.value);
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 </form>
</body>
</html>
GIẢI THÍCH
1. Điểm bắt đầu của form.
2. Kiểu của thẻ <input> 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ẻ <input>.
6. Thẻ đóng của form.
Giải phóng thời gian, khai phóng năng lực