Processing forms with events (Video Version)

Form (mẫu đơn điền) là công cụ để trang web của bạn gửi thông tin đến server.

Chúng tôi không cho các trang web trong Khan Academy tương tác với server

vì lí do an ninh,

nên chúng tôi không dạy về form ở đây.

Nhưng giờ bạn đang học JS để làm việc với trang web,

nên tôi có thể cho bạn xem cách dùng JS để xử lí element trong form

mà không cần gửi tới server.

Tôi đã viết một số element trong form này đây để cho biết name (tên) của người dùng,

và language (ngôn ngữ) họ dùng.

Tôi muốn trang web này chào người dùng theo ngôn ngữ đó

khi click vào nút này.

Việc đầu tiên là lưu element của nút vào một biến,

ta sẽ viết document.getElementById("button").

Tiếp theo là định nghĩa một hàm event listener,

`var onButtonClick = function() {`

rồi ở trong này, ta sẽ hiện ra một dòng message,

viết là
`document.getElementById("message")`,

và message đó sẽ là một 'div'.

có nội dung là textContent += "You clicked me! Thank you so much!".

Div để cám ơn.

Cuối cùng ta sẽ thêm một event listener cho button

để khi click vào thì sẽ gọi hàm kia.

vậy nên là `("click", onButtonClick)`.

Bạn hãy dừng video lại và thử xem có hoạt động đúng không.

Giờ ta sẽ thay đổi nội dung dòng chữ tuỳ theo nội dung trong form.

Ta cần lấy được dữ liệu mà người dùng nhập vào trong form kia.

Hãy tạo một variable cho nó,

viết là
`var name = document.getElementById`,

và element đó có id,

nên ta nhập id vào đây.

Giờ ta tạo một string mới để chào người dùng, rồi thêm cái "name" vào sau,

viết là `var greeting = "Heyaz ,"`, để chào,

` + name`.

Okay, giờ ta có một string, kèm theo dữ liệu trong biến kia.

Ta sửa cái textContent này thành greeting.

Xem nào, có vẻ được rồi.

Ta nhận vào input của name, tạo một string để chào,

và đưa string đó vào trong div message.

Bạn hãy dừng video lại thử xem có được không.

Không được, phải không?

bạn có thấy "Heyaz [object Object]", hay là

Giả sử tên bạn không phải là 'Object'

- nếu tên bạn thế thì cũng không sao cả -

thì tức là chương trình có lỗi rồi.

Ta muốn hiện ra đúng cái tên ta nhập vào cơ mà,

nhưng lại chỉ thấy chữ "object".

Thế tức là cái biến 'name' đang trỏ tới một object (đối tượng),

chữ không phải trỏ tới string của tên.

Có khi tự bạn cũng đã thấy được nguyên do lỗi này rồi.

Ta gán cả đối tượng element vào biến 'name,'

mà đối tượng element đó thì lại là một đối tượng to,

có nhiều thông tin về element ở trong:

có các thuộc tính, các hàm.

Để biết được nội dung người dùng nhập vào là gì, ta phải truy cập tới một thuộc tính riêng

trong element: là 'value'.

Tôi sẽ gõ thêm '.value' vào, thế là sửa được rồi.

Bạn hãy dừng video lại mà thử xem.

Được rồi đúng không?

Vừa rồi là một lỗi khác thường gặp khi lập trình, bạn nên cẩn thận.

Tôi sẽ cho bạn xem một lỗi thường gặp nữa.

Tôi kéo dòng này ra ngoài hàm.

Bạn dừng video lại mà thử xem,

bạn sẽ thấy

một string rỗng ở chỗ tên.

Bạn có biết tại sao không?

Lí do nằm ở trong thứ tự các dòng code được chạy.

Trong code này, trình duyệt hiện trang web lên,

chạy các code JS từng dòng một.

Đầu tiên, gán button vào một biến.

Sau đó, lưu giá trị của input vào một biến nữa.

Giá trị này được lưu vào lúc trang web hiện ra,

tức là chưa có giá trị gì cả.

Sau đó mới định nghĩa hàm và event listener.

Khi gọi hàm listener, cái 'name' vẫn mang giá trị của string

khi trang web hiện lên,

chứ listener không biết được giá trị sau khi người dùng nhập vào là gì.

Đấy là lí do dòng code này

phải đặt ở trong hàm event listener,

thì nó mới biết được giá trị của input khi event xảy ra.

Ta sẽ thêm code nữa để lấy giá trị của 'language',

để bạn hiểu rõ hơn.

Ở trong listener, tôi sẽ lưu giá trị của 'language' trong một biến 'lang'.

Vào lề xấu quá.
Ugh, look at this indenting,

Sắp đặt lại các hàng này nào...

Okay...

[gõ]

bạn thấy rằng tôi đang đặt tên biến ở đây giống như tên id ở trên,

đấy là tôi thích thế, còn bạn đặt tên thế nào cũng được.

Giờ tôi sẽ hiện ra một message khác tuỳ theo language mà người dùng chọn.

Để ý rằng 'value' không phải là dòng chữ hiện ra ở trong menu drop-down,

mà là thuộc tính value ở trong HTML.

Vậy nên 'lang' sẽ có thể có các giá trị là "en", "es", hoặc là "plt".

Thế nên

thì câu chào sẽ là "Hola, ".

Ta sẽ tạo biến greeting ở đây.

Đặt 'greeting' là "Hola ," cộng thêm tên.

Còn nếu lang là "plt", tức là Pig Latin,

thì câu chào sẽ là "Ello-hay, " cộng thêm tên,

rồi thêm dòng 'else' cho tiếng Anh.

Ta chuyển cái này vào đây.

Được rồi.

Nếu bạn muốn tự thách đố mình thì

hãy thử đổi cả tên ra tiếng Pig Latin nữa,

Để toàn bộ câu chào đều là Pig Latin.

Thế là chuẩn luôn.

Giờ hãy dừng video lại, nhập tên bạn vào,

chọn một ngôn ngữ khác mà thử xem.

Hay không?

Có rất nhiều thứ để làm với form input với JS,

word game, number game, viết truyện,...

Và nếu bạn có sử dụng server ngoài Khan Academy,

bạn có thể dùng JS để xử lí input trong form

trước khi gửi tới server.

Còn có nhiều event khác trong form để listen nữa,

ví dụ như là 'keypress' hay 'focus'.

Bạn hãy nhớ để ý đọc 'value' của input,

và đọc value đó sau lúc event xảy ra.

Bạn sẽ được thực hành ngay trong bài sau,