JavaScript: onSubmit
Giải phóng thời gian, khai phóng năng lực
Sự kiện onSubmit là một thuộc tính chỉ duy nhất có ở thẻ <form>, nó được kích hoạt chỉ khi người dùng submit form dữ liệu. Lập trình viên thường dựa trên sự kiện này để validate form trước khi gửi form tới server. Nếu sự kiện nhận được giá trị false thì form sẽ không được gửi đi, ngược lại thì form sẽ được gửi. Dưới đây sẽ trình bày một số ví dụ áp dụng sự kiện onSubmit.
Ví dụ 1:
<html><head><title>The onSubmit Event Handler</title></head>
<body font="arial" size=3>
<script language="JavaScript">
1 function popUp(){
2 newWin=window.open('','NewWin','toolbar=no,
status=no,width=500,height=200');
3 newWin.document.write("<h3>Form data</h3>");
newWin.document.write("<b>Your name is:</b> " +
document.form1.namestring.value);
newWin.document.write("<br><b>Your address is: </b>" +
document.form1.address.value);
}
</script>
<b> <hr>
4 <form name="form1" onSubmit="popUp();">
<p>
Type your name:
5 <input type="text"
name="namestring"
size="50">
<p>
Type in your address:
<input type="text"
name="address"
size="80">
<p>
6 <input type="submit" value="Submit form">
<input type="reset" value="Clear">
</form></body>
</html>
GIẢI THÍCH
1. Định nghĩa hàm popUp(), hàm này có nhiệm vụ mở một cửa sổ mới để đưa ra thông tin người dùng đã điền dữ liệu.
2. Tạo cửa sổ mới.
3. Tạo form ở cửa sổ mới.
4. Form của trang web. Khi người dùng nhấn nút submit thì sự kiện onSubmit sẽ được kích hoạt và nó sẽ gọi hàm popUp() để mở cửa sổ mới.
5. Định nghĩa hai text box để điền dữ liệu, một để điền tên và một để điền địa chỉ.
6. Tạo nút submit để gửi dữ liệu.
Ví dụ 2:
<html><title>Check it Out!</title>
<head>
<script language="JavaScript">
// Script modified from original found at
// http://javascript.internet.com
1 function okForm(form){
if (form.accept.checked == true){
return true;}
else{
alert("Please check the box!");
form.accept.focus();
return false;}
}
</script>
</head>
<body bgcolor="silver">
<font face="arial,helvetica" size=2>
<b>Thank you for your order. Check the box to continue.</b>
2 <form action="/cgi-bin/checkout.pl"
method="post"
3 onSubmit="return okForm(this)">
<input type="checkbox"
name="accept"
value="0" >
4 <input type="submit"
value="Go to checkout" >
<input type="button"
value="Go to Home Page"
5 onClick="window.location.replace('../localhost/default.htm');" >
</form>
</body>
</html>
GIẢI THÍCH
1. Ta định nghĩa một hàm, hàm này có nhiệm vụ kiểm tra xem người dùng đã check vào hộp kiểm chưa, nếu người dùng đã check thì hàm sẽ trả về giá trị true và form sẽ được submit, ngược lại thì hàm trả về false và form sẽ không được submit.
2. Tạo một form dữ liệu với thuộc tính action chứa URL của trang nhận, mỗi lần submit thành công thì dữ liệu sẽ được chuyển tới trang này.
3. onSubmit sẽ được kích hoạt khi người dùng nhấn nút submit.
4. Nút lệnh submit.
5. Khi người dùng nhấn nút submit thì sự kiện onclick sẽ được kích hoạt, điều này dẫn đến đoạn lệnh trong sự kiện onclick được thực thi, cụ thể là trang hiện thời sẽ được thay thế bằng một trang khác thông qua câu lệnh location.replace().
Giải phóng thời gian, khai phóng năng lực