Đối tượng form và các thành phần
Sửdụng đối tượng form
Tổng quan các đối tượng trong form Đối tượng Text
Đối tượng CheckBox và RadioButton Đối tượng Select
JavaScript cĩ thể thực hiện khá nhiều thao tác trên giao diện, xử lý các cửa sổ web browser, thực hiện các hiệu ứng hình ảnh,… Tuy nhiên, một trong những điểm mạnh mà nĩ đem lại cho người lập trình là khả năng xử lý các form nhập liệu của trang web. Với khả năng này, JavaScript giúp ứng dụng thực hiện nhiều xử lý tại server, làm cho tốc độ xử lý và thời gian hồi đáp với người dùng của chương trình được cải thiện.
Trong phần này, bạn sẽ học các sử dụng JavaScirpt để truy cập vào các form, đọc và xử lý các thơng tin nhập liệu trên form hay xử lý các sử kiện mà người dùng trong quá trình thao tác với form phát sinh ra cũng giống nhưng việc lập trình trên các màn hình của một ứng dụng Windows.
Học phần 5 – Lập Trình Web Nâng Cao Trang 29/59
IV.1. Sử dụng đối tượng form
Sửdụng đối tượng form
Mỗi form được đại diện bởi một đối tượng form Truy cập đối tượng form qua document.forms
hoặc document.tenForm Thuộc tính action, target và method Hành động submit và reset
Một form trong trang web được đại diện bởi đối tượng form. Do một trang web cĩ thể cĩ nhiều form JavaScript cho phép bạn truy cập các form từ đối tượng document thơng qua tập hợp forms. Ví dụ, để truy cập form đầu tiên trong trang web:
document.forms(0) hoặc
document.TênForm
Thuộc tính action, target và method
Ta đã biết rằng chức năng chính của form là để gửi dữ liệu đến server. File tại server sẽ nhận dữ liệu gửi tới được chỉ ra trong thuộc tính action của tag <form>. Đối tượng form cũng mơ phỏng thuộc tính action một cách tương tự. Với thuộc tính này, bạn cĩ thể thay đổi file sẽ nhận dữ liệu tuỳ theo từng điều kiện nhập liệu.
Ví dụ, trên form đăng nhập frmLogin bạn cĩ một checkbox dành cho người quên password đăng nhập vào sẽ chuyển tới một trang kiểm tra email để gửi password thay vì trang kiểm tra username, password như bình thường. Ta cĩ thể viết đoạn code sau: Ví dụ: Nếu checkbox được chọn frmLogin.action=”SendPassword.asp” Ngược lại frmLogin.action=”CheckPassword.asp” frmLogin.submit()
Thuộc tính target giúp định vị kết quả xử lý của trang web trong action sẽ được hiển thịở đâu. Khi ứng dụng web thiết kế với nhiều frame, bạn cĩ thể cần chỉ ra tên frame sẽ thể hiện kết quả trong target.
Tương tự với action, bạn cĩ thể thay đổi cách thức gửi dữ liệu từ form về server thơng qua thuộc tính method. method cĩ hai giá trị là “POST” và “GET”.
Học phần 5 – Lập Trình Web Nâng Cao Trang 30/59
Hành động submit và reset
Trong ví dụ trên, bạn để ý thấy chúng tơi dùng hành động submit() của form để gửi dữ liệu về server. Bạn cĩ thể khơng cần thiết kế nút Submit cho một form rồi chờđến lúc người dùng click nút này thì dữ liệu mới được gửi về server. Trên thực tế, đa số các form đều thiết kế giao diện hình ảnh với các nút submit là những image. Người lập trình sẽ gọi hành động submit khi cần.
Ngược lại với submit là reset. Hành động reset đưa form về trạng thái ban đầu khi server vừa gửi trang web tới cho trình duyệt.
Sự kiện onsubmit
sự kiện onsubmit xảy ra trước khi dữ liệu của form được gửi tới server bằng cách người dùng click vào nút submit trên form. Điều này cĩ nghĩa là nếu bạn gọi hành động submit() thì sự kiện onsubmit sẽ khơng xảy ra. Hãy chạy thử ví dụ sau đây:
Ví dụ:
<HEAD>
<SCRIPT LANGUAGE=javascript>
function FORM1_onsubmit() {
alert("Su kien OnSubmit")
} (adsbygoogle = window.adsbygoogle || []).push({});
function FORM1_onreset() {
alert("Su kien OnReset")
} function cmdReset_onclick() { FORM1.reset() } function cmdSubmit_onclick() { FORM1.submit() } </SCRIPT> </HEAD> <BODY>
<FORM id=FORM1 name=FORM1 action="" method=post
onsubmit="return FORM1_onsubmit()" onreset="return FORM1_onreset()">
<INPUT type=button value="Click to submit" name=cmdSubmit onclick="return cmdSubmit_onclick()">
<INPUT type=button value="Click to reset" name=cmdReset onclick="return cmdReset_onclick()"></P>
<INPUT type=submit value=Submit><INPUT type=reset value=Reset></FORM>
Học phần 5 – Lập Trình Web Nâng Cao Trang 31/59
IV.2. Tổng quan các đối tượng trong form
Tổng quan các đối tượng
trong form
Tập hợp elements của form dùng đểtruy cập các đối tượng như textbox, checkbox, button,…
Truy cập trực tiếp đến các đối tượng: TênForm.tênĐốiTượng
for (i=0;i<FORM1.elements.length;i++)
alert(“Doi tuong: “ + FORM1.elements(i).name + “kieu “ + FORM1.elements(i).type)
Tập hợp elements
Tập hợp elements của form dùng để truy cập các đối tượng như textbox, checkbox, button,… trong một form. Các đối tượng được đánh số từ 0.
Ví dụ sau minh hoạ liệt kê tất cả các đối tượng cĩ trong form.
Ví dụ:
for (i=0;i<FORM1.elements.length;i++)
alert(“Doi tuong: “ + FORM1.elements(i).name + “ kieu “ + FORM1.elements(i).type)
Ví dụ sau sẽ xố trắng các textbox cĩ trong form.
Ví dụ:
for (i=0;i<FORM1.elements.length;i++) if (FORM1.elements(i).type=”text”) FORM1.elements(i).value=””
Bạn cũng cĩ thể truy cập trực tiếp đến các đối tượng thơng qua tên của đối tượng đĩ bằng cú pháp:
Học phần 5 – Lập Trình Web Nâng Cao Trang 32/59
IV.3. Tổng quan các đối tượng trong form (tt)
Tổng quan các đối tượng
trong form (tt) (adsbygoogle = window.adsbygoogle || []).push({});
Các sựkiện chung cho các đối tượng trong form
{ onFocus, onBlur
{ onClick, onMousedown, onMouseup, onMouseout, onMouseover
{ onKeyDown, onKeyPress, onKeyUp
{ onChange
Các sự kiện chung cho các đối tượng trong form
Để làm việc với các đối tượng, ngồi việc truy cập tới đối tượng đĩ ta cịn phải biết sử dụng các thuộc tính, hành động cũng như nắm được những sự kiện xảy ra trên đối tượng.
Mỗi loại đối tượng cĩ những thuộc tính, hành động khác nhau nhưng trên ứng dụng web, các đối tượng trong form cĩ chung những sự kiện sau:
onFocus: đối tượng nhận focus onBlur: đối tượng mất focus
onClick, onMousedown, onMouseup, onMouseout, onMouseover: các sự kiện click, nhấn, thả, di chuyển chuột vào, ra khỏi đối tượng.
onKeyDown, onKeyPress, onKeyUp: các sự kiện nhấn, thả phím trên đối tượng onChange: xảy ra trên text, textarea hay select tại thời điểm đối tượng bị mất focus khi giá trị của chúng bị thay đổi
Học phần 5 – Lập Trình Web Nâng Cao Trang 33/59
IV.4. Đối tượng Text
Đối tượng Text
Thuộc tính quan trọng nhất của textbox làvalue
Truy cập một thuộc tính của đối tượng: TênĐốiTương.TênThuộcTính
functiontxtCertificate_onchange() {
frmTestText.txtCertificate.value=
frmTestText.txtCertificate.value.toUpperCase()
}
<FORM name="frmTestText" method="post"> <INPUT type="text" name="txtCertificate"
onchange="return txtCertificate_onchange()"> </FORM>
Thuộc tính quan trọng nhất của textbox là value. Để truy cập một thuộc tính của đối tượng, bạn sử dụng cú pháp:
TênĐốiTương.TênThuộcTính
Ví dụ: <head> <script language="javascript"> function txtCertificate_onchange() { frmTestText.txtCertificate.value= frmTestText.txtCertificate.value.toUpperCase() } </script> </head> <body>
<FORM name="frmTestText" method="post">
<INPUT type="text" name="txtCertificate" onchange="return
txtCertificate_onchange()">
</FORM> </body>
Học phần 5 – Lập Trình Web Nâng Cao Trang 34/59 (adsbygoogle = window.adsbygoogle || []).push({});
IV.5. Đối tượng CheckBox và RadioButton
Đối tượng CheckBox và
RadioButton
Hai thuộc tính quan trọng làchecked vàvalue
{ checked: được đánh dấu hay khơng
{ value: giá trịkểcảkhi cĩ hay khơng đánh dấu Radio button trong cùng nhĩm phải cĩ cùng tên
for (i=0;i<frmTestOption.grpMonHoc.length;i++)
if (frmTestOption.grpMonHoc(i).checked){ alert(“Ban chon mon “ +
frmTestOption.grpMonHoc(i).value break
}
Đối tượng checkbox
Đối với checkbox, ta cĩ hai thuộc tính quan trọng là checked và value. checked: cho biết checkbox cĩ được đánh dấu hay khơng
value: giá trị của checkbox kể cả khi cĩ hay khơng đánh dấu
Ví dụ: <head> <script language="javascript"> function cmdChon_onclick() { mon = "" if (frmTestCheck.chkMon(0).checked ) mon=frmTestCheck.chkMon(0).value if (frmTestCheck.chkMon(1).checked ) mon+=" " + frmTestCheck.chkMon(1).value alert("Ban chon mon: " + mon)
}
</script> </head><body>
<form name="frmTestCheck" method="post">
<INPUT type="checkbox" name="chkMon" value="Tieng Anh">Anh van<P>
<INPUT type="checkbox" name="chkMon" value="Toan">Toan hoc<P> <INPUT type="button" value="Chon mon hoc" name="cmdChon" onclick="return cmdChon_onclick()"></P>
</form> </body>
Trong ví dụ này, chúng tơi cố ý đặt tên hai checkbox trùng nhau để minh hoạ với bạn cách dùng mảng của JavaScript để truy cập các đối tượng trùng tên. Với cách làm này, bạn sẽ áp dụng khi sử dụng đối tượng radio.
Học phần 5 – Lập Trình Web Nâng Cao Trang 35/59
Đối tượng radio
Đối tượng radio hồn tồn tương tự với đối tượng checkbox. Trong khi thiết kế các nhĩm lựa chọn (option group) bạn sẽ dùng chung một tên cho các radion button. Với cách này, trình duyệt tự động xác định một radio button thuộc vào một nhĩm hay đứng riêng lẻ.
Để xác định một radion button trong nhĩm được chọn, ta sẽ chỉ cĩ một cách duy nhất là duyệt qua tồn bộ các radion button trong nhĩm.
Ví dụ:
for (i=0;i<frmTestOption.grpMonHoc.length;i++) if (frmTestOption.grpMonHoc(i).checked){ alert(“Ban chon mon “ +
frmTestOption.grpMonHoc(i).value break
Học phần 5 – Lập Trình Web Nâng Cao Trang 36/59
IV.6. Đối tượng Select (adsbygoogle = window.adsbygoogle || []).push({});
Đối tượng Select
Thuộc tính selectedIndexchỉdùng cho ComboBox Tập hợp options trong đối tượng select, đại diện
cho các mục chọn
Mon hoc<SELECT name=“lstMon“multiplesize=“4”>
<OPTION value="av" selected>Anh van</OPTION> <OPTION value="th">Toan hoc</OPTION> <OPTION value="vl">Vat ly</OPTION> <OPTION value="hh">Hoa hoc</OPTION>
</SELECT>
for (i=0;i<frmTestSelect.lstMon.length;i++) if (frmTestSelect.lstMon.options(i).selected)
…
Đối tượng select
Đối tượng select trong HTML đại diện cho cả ComboBox và ListBox tuỳ theo giá trị của thuộc tính size mà bạn chỉđịnh trong tag <select>.
Với ListBox (size>1) bạn cũng cĩ thể chỉ định người dùng cĩ thể cùng một lúc chọn nhiều mục hay khơng thơng qua thuộc tính multiple. Nhiệm vụ của chúng ta khi làm việc với đối tượng select là xác định ra mục option nào đang được chọn và giá trị của nĩ là bao nhiêu. Để giúp ta làm việc này, JavaScript cung cấp tập hợp
options trong đối tượng select, đại diện cho các mục chọn.
Với một option bạn cĩ thể xác định giá trị hay nội dung mục hiển thị thơng qua thuộc tính value và text. Option nào được chọn sẽ cĩ giá trị của thuộc tính selected là true. Như vậy ta cĩ thể dùng cách duyệt qua tập hợp options để xác định ra mục chọn. Ví dụ: <head> <script language=javascript> function cmdChon_onclick() { for (i=0;i<frmTestSelect.cboMon.length;i++) if (frmTestSelect.cboMon.options(i).selected) alert(frmTestSelect.cboMon.options(i).text) } </script> </head>
Học phần 5 – Lập Trình Web Nâng Cao Trang 37/59
<body>
<form name="frmTestSelect" method=post> Mon hoc<SELECT name="cboMon">
<OPTION value="av" selected>Anh van</OPTION> <OPTION value="th">Toan hoc</OPTION>
<OPTION value="vl">Vat ly</OPTION> <OPTION value="hh">Hoa hoc</OPTION> </SELECT>
<INPUT type="button" value="Mon duoc chon" name="cmdChon" onclick="return cmdChon_onclick()">
</form> </body>
Với cách làm trên, bạn sẽ xử lý tốt nhất với các ListBox cho phép chọn nhiều mục. Tuy nhiên, với những ComboBox hay ListBox chỉ chọn một mục ta cĩ thể dùng thuộc tính selectedIndex của đối tượng select.
Ví dụ:
sel = frmTestSelect.cboMon.selectedIndex alert(frmTestSelect.cboMon.options(sel).text)
Học phần 5 – Lập Trình Web Nâng Cao Trang 38/59