Bài tập Form & JavaScript

Form & JavaScript

Nội dung

Mục tiêu bài tập .............................................................................................................2

I. Thiết kế Form nhập liệu ........................................................................................2

II.

JavaScrip t ...........................................................................................................3

III.

Một số ví dụ ........................................................................................................5

1. Hiển thị thông báo xác nhận ................................................................................5

2. Hiển thị Đồng hồ .................................................................................................6

3. Chữ chạy trên Statu s ............................................................................................7

4. Check All & UnCheck All...................................................................................8

5. Kiểm tra thông tin trước khi Submit....................................................................9

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

1

Mục tiêu bài tập

▪

Thiết kế Form nhập liệu

Nắm vững một số khái niệm về JavaScript

Học JavaScript qua một số ví dụ

o Hiển thị thông báo xác nhận

o Hiển thị đồng hồ

o Chữ chạy trên Status

o Check All & Uncheck All

o Kiểm tra thông tin trước khi Submit

I.

Thiết kế Form nhập liệu

Thiết kế Form theo mẫu sau:

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

2

Một số Tag HTML mô tả Form nhập liệu:

HTML

Mô tả

Ví dụ

<form method="POST"

action="xuly.php">

Form Nhập thông tin cá nhân

</form>

<form method="POST|GET"

enctype="multipart/form-

data" action="xuly.php">

</form>

Định nghĩa Form nhập liệu.

Tất cả các control nhập liệu

phải nằm trong phạm vi của

Tag này.

-

method:

qui

định

phương thức truyền dữ

liệu về server

-

action: trang web nhận

xử lý dữ liệu nhập

enctype: thuộc tính bắt

buộc khi có sử dụng

FileUpload

<textarea rows="2" name="S1"

cols="20">

Abc

<textarea rows="Number"

name="S1"

cols="Number"></textarea>

Chèn vùng nhập liệu có

nhiều dòng

</textarea>

Tên đăng nhập:

<input type="text"

name="t_username" size="20">

<BR>

<input

Chèn ô TextBox nhập liệu

type=”text|password”

name=”T1” size=”Number”

value=”xyz”>

-

size: độ rộng của ô

value: giá trị khởi tạo

có sẵn trên ô

Mật khẩu:

<input type="password"

name="t_password" size="100">

<input type="button"

value="Test"

<input

Chèn Button

type="button|submit|reset"

value="xyz"

style="width:100;">

style="width:Number;">

<input type="submit"

value="Submit"

name="b_submit">

<input type="reset"

value="Reset" name="b_reset">

<input type="file" name="F1"

size="20">

<input type="file"

Chèn FileUpload

Chèn CheckBox

name="F1" size="20">

<input type="checkbox"

name="C1" value="ON|OFF">

<input type="checkbox"

name="c_music" value="ON">Âm

nhạc<BR>

<input type="checkbox"

name="c_research"

value="OFF">Nghiên cứu<BR>

<input type="radio" value="1"

checked name="r_sex">Nam<BR>

<input type="radio"

value="V1" checked

name="R1">

Chèn RadioButton

-

name: tên nhóm

Các RadioButton thuộc

cùng một nhóm phải có

cùng name.

<input type="radio" value="0"

name="r_sex">Nữ<BR>

<select size="5" name="D1"

multiple>

</select>

<select size="5" name="D1"

multiple>

</select>

Chèn DropDown List box

-

multiple: cho phép

chọn nhiều item cùng 1

lúc

</select>

II. JavaScript

<html>

<head>

some statements

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

3

</script>

</head>

<body>

some statements

</script>

</body>

</html>

Cú pháp JavaScript

var varname=value;

if (condition) {

Khai báo Biến

statements;

}

else {

statements2;

}

Lệnh điều kiện

switch (expression){

case label :

statements;

break;

default : statement;

}

for (initial-statement; condition; increment){

statements;

}

do{

statements;

} while (condition);

Lệnh lặp

while (condition) {

statements;

}

Duyệt lần lượt các phần tử của một mảng

for (variable in object){

statements;

}

Khai báo chung

function funcName(argument1,argument2,etc){

statements;

}

Khai báo hàm

Giá trị trả về của hàm

return value;

Hoặc

return ( value );

var string="hello”

var stringlength=string.length //stringlength=5

Thuộc tính

length

Đối tượng String

Phương thức

stringObj.anchor(anchorString) – tạo Bookmark

strVariable.link(URL)

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

4

Cú pháp JavaScript

strObj.charAt(index), strObj.charCodeAt(index)

string1.concat([string2[, string3[,... [, stringn]]]])

strObj.indexOf(subString[, startIndex])

MyArray = new Array(5,5);

MyArray[0, 0] = "Ryan Dias";

Phương thức

Join –Ghép các phần tử thành 1 chuỗi.

Pop – Lấy phần tử cuối

Đối tượng Array

Đối tượng Date

Push – Thêm 1 (hoặc nhiều phần tử) vào cuối mảng

Reverse - Đổi phần tử đầu – cuối

Shift – Xóa phần tử đầu khỏi mảng

var my_date=new Date("October 12, 1988 13:14:00");

var my_date=new Date("October 12, 1988");

var my_date=new Date(88,09,12,13,14,00);

var my_date=new Date(88,09,12);

Hàm

getDate(), getDay(), getMonth(), getYear(),…

getTime(),…

III. Một số ví dụ

1.

Hiển thị thông báo xác nhận

▪ window.confirm(“Message”)

▪ window.alert(“Message”)

<html>

<head>

<title>Window Alert & Confirm</title>

</head>

<body>

<!--

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

5

x = window.confirm("Please chose YES or NO button!");

if (x)

window.alert("You have chosen YES. Thank you!");

else

window.alert("You have chosen NO. Thank you!");

//-->

</SCRIPT>

</body>

</html>

2.

Hiển thị Đồng hồ

<HTML>

<HEAD>

<TITLE>Clock</TITLE>

</HEAD>

<BODY>

</FORM>

<!-- Hide from non JavaScript browsers

function clockTick()

{

currentTime = new Date();

document.clock_form.clock.value = " "+currentTime;

document.clock_form.clock.blur();

setTimeout("clockTick()", 1000);

}

clockTick();

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

6

// End of clock -->

</SCRIPT>

</TD></TR>

</TABLE>

</BODY>

</HTML>

3.

Chữ chạy trên Status

<HTML>

<HEAD>

<!-- Start of scroller script

var scrollCounter = 0;

var scrollText = "Welcome to my lesson!";

var scrollDelay = 70;

var i = 0;

while (i ++ < 140)

scrollText = " " + scrollText;

function Scroller()

{

window.status = scrollText.substring(scrollCounter++,

scrollText.length);

if (scrollCounter == scrollText.length)

scrollCounter = 0;

setTimeout("Scroller()", scrollDelay);

}

Scroller();

// End of scroller script -->

</SCRIPT>

<TITLE>StatusScroller</TITLE>

</HEAD>

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

7

<BODY><P>See at your status bar!!!</P>

</BODY>

</HTML>

4.

Check All & UnCheck All

<html>

<head>

function makeCheck(thisForm)

{

for (i = 0; i < thisForm.option.length; i++)

{

thisForm.option[i].checked=true;

}

function makeUncheck(thisForm)

{

for (i = 0; i < thisForm.option.length; i++)

{

thisForm.option[i].checked=false;

}

</script>

</head>

<body>

<br />

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

8

<input type="checkbox" name="option">Apples<br />

<input type="checkbox" name="option">Oranges<br />

<input type="checkbox" name="option">Bananas<br />

<input type="checkbox" name="option">Melons

</form>

</body>

</html>

5.

Kiểm tra thông tin trước khi Submit

Tạo tập tin Validate.js chứa mã lệnh JavaScript như sau:

function validateControl(ctrl, msg) {

if ((ctrl.value == "") || (ctrl.value == null)) {

alert(msg);

ctrl.focus();

return false;

}

return true;

}

function validateForm() {

var formObj = document.sample;

var bCheck = validateControl(formObj.yourname,"You have not filled

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

9

in the name field.");

if (bCheck == true) {

bCheck validateControl(formObj.yourage,"You

=

have

not

filled in the age field.");

}

if (bCheck == true) {

bCheck

=

validateControl(formObj.yourdob,"You

filled in your date of birth.");

}

return bCheck;

}

Trong trang web sử dụng JavaScript:

<HTML>

<HEAD>

<TITLE>FormValidation</TITLE>

</HEAD>

<BODY>

<FORM NAME="sample" METHOD=POST ACTION="adduser.asp"

onSubmit="return validateForm()">

Enter your name :

Enter your age :

Date of birth :

</FORM>

</BODY>

</HTML>

Biên soạn: Phan Thanh Sơn – webmaster.tsqtt@yahoo.com

10

Bài tập Form & JavaScript - Phan Thanh Sơn