JavaScript có thể xử lý các biểu mẫu không?

Các biểu mẫu HTML là các đối tượng được sử dụng để lấy thông tin mẫu từ người dùng. Ví dụ: nếu bạn làm việc với khách hàng, bạn cần có họ và tên, địa chỉ và mã zip của khách hàng. Một đối tượng biểu mẫu hiển thị các trường nhập để người dùng nhập thông tin này và gửi lại cho máy chủ web của bạn. Bạn có thể sử dụng JavaScript để cung cấp các tùy chỉnh động cho biểu mẫu HTML tiêu chuẩn. Bài học này giải thích một số cách mà JavaScript hữu ích khi sử dụng biểu mẫu trong trang web của bạn và cách xử lý sự kiện và xác thực trước khi gửi dữ liệu biểu mẫu trở lại tập lệnh phía máy chủ của bạn.  

Biểu mẫu là gì?

Biểu mẫu HTML là bất kỳ hộp văn bản, hộp kiểm hoặc nút radio nào nhận đầu vào từ người dùng. HTML đi kèm với một số loại đầu vào biểu mẫu mà bạn có thể sử dụng mà không cần tạo các tùy chọn đầu vào của riêng mình. Bạn có thể tùy chỉnh các phần tử biểu mẫu bằng CSS, JavaScript hoặc thuộc tính thẻ HTML nội tuyến.  

Hầu hết các quản trị viên web cần một số tùy chỉnh cho biểu mẫu của họ và đây là lúc JavaScript có ích. JavaScript cho phép bạn thực hiện các lệnh gọi động phía máy khách tới các biểu mẫu và đầu vào do người dùng của bạn nhập. Chẳng hạn, giả sử bạn muốn đảm bảo rằng người dùng đã nhập giá trị vào hộp văn bản "first_name" trước khi bạn gửi thông tin đầu vào đến máy chủ. Bạn có thể gửi dữ liệu đầu vào đến máy chủ, xử lý dữ liệu, tìm biến đầu vào bị thiếu rồi gửi lại biểu mẫu cho người dùng kèm theo thông báo lỗi. Quá trình này mất thời gian, vì vậy bạn có thể kiểm tra nhanh hộp văn bản tên trống bằng JavaScript. Đây chỉ là một trong nhiều lý do để sử dụng xác thực JavaScript trong biểu mẫu HTML của bạn.  

Sử dụng JavaScript với Biểu mẫu

Hãy lấy một biểu mẫu đơn giản yêu cầu người dùng nhập họ và tên. Hãy nhìn vào đoạn mã dưới đây

Đoạn mã trên có một biểu mẫu hiển thị hộp văn bản đầu vào cho tên và họ của người dùng. Hộp nhập đầu tiên là "first_name" và chúng tôi muốn đảm bảo rằng người dùng nhập một giá trị trước khi chúng tôi gửi biểu mẫu đến trang xử lý của máy chủ có tên " process_form. php. " Chúng ta có thể làm điều này với JavaScript. Một lần nữa, chúng tôi sử dụng phương thức getElementById để lấy hộp văn bản nhập biểu mẫu và đánh giá xem người dùng đã nhập giá trị hay chưa. Đầu vào có thể là bất kỳ giá trị nào, nhưng phải có ít nhất một ký tự đầu vào. Chúng tôi muốn kích hoạt kiểm tra JavaScript khi người dùng nhấp vào nút gửi. Suy nghĩ đầu tiên của bạn có thể là kích hoạt sự kiện khi sự kiện "onclick" xảy ra. Tuy nhiên, biểu mẫu HTML có trình kích hoạt sự kiện riêng khi người dùng nhấp vào nút gửi để gửi giá trị biểu mẫu đến máy chủ. Sự kiện này được gọi là trình kích hoạt "onsubmit".  

Hãy thêm trình xử lý sự kiện "onsubmit" và nối vào trang HTML hiện tại. Dưới đây là một bản sao đầy đủ của trang mẫu đầu vào người dùng của chúng tôi.  

Lưu ý rằng chúng tôi đã thêm trình kích hoạt sự kiện "onsubmit" trỏ đến hàm JavaScript "ValidateFirstName()" mà chúng tôi đã xác định trong thẻ tập lệnh HTML. Lưu ý rằng chúng tôi đã thêm từ khóa "return" ở phía trước trình kích hoạt. Câu lệnh "return" đặt hàm onsubmit thành true hoặc false. Nếu giá trị boolean "false" được hàm trả về, nó sẽ báo cho biểu mẫu ngừng gửi và trang sẽ không gửi dữ liệu đến máy chủ. Giá trị boolean false cho biểu mẫu HTML biết rằng đầu vào của người dùng không vượt qua được quá trình kiểm tra xác thực. Ngược lại, nếu hàm xác thực biểu mẫu trả về giá trị boolean là true, thì sự kiện HTML biết rằng nó có thể tiếp tục với việc gửi thông tin nhập của người dùng

Trong hàm JavaScript, chúng tôi nhận được phần tử HTML "first_name", xác định xem có đầu vào hay không và trả về true hoặc false tùy thuộc vào đầu vào. Nếu giá trị bằng một chuỗi trống, thì chúng tôi biết rằng người dùng đã nhập không có giá trị. Mặt khác, người dùng đã nhập một giá trị và chúng tôi có thể tiếp tục xử lý biểu mẫu. Bạn cũng có thể thực hiện kiểu xác thực này với các phần tử biểu mẫu khác. Thông thường, mọi trường bắt buộc đều được đánh dấu cho người dùng của bạn để họ biết rằng họ cần nhập giá trị vào các trường cụ thể. Chẳng hạn, hộp nhập địa chỉ có thể được yêu cầu, nhưng bạn có hộp nhập địa chỉ thứ hai cho số căn hộ hoặc dãy phòng. Bạn sẽ đặt dấu hoa thị bên cạnh trường địa chỉ đầu tiên chứ không phải trường thứ hai. Hoặc, bạn chỉ cần đặt nhãn có tên "bắt buộc" bên cạnh trường. Tuy nhiên, bạn quyết định đánh dấu các thành phần biểu mẫu HTML, chỉ cần đảm bảo rằng chúng dễ dàng được người dùng xác định để tránh nhầm lẫn

Cách tự động thêm và xóa các mục biểu mẫu

Chúng ta vừa thấy cách sử dụng hộp văn bản nhập biểu mẫu và xác thực thông qua JavaScript, nhưng biểu mẫu thường có các loại đầu vào khác, chẳng hạn như nút radio và hộp kiểm. Bạn có thể tự động thêm và xóa bất kỳ thành phần biểu mẫu nào trong tập lệnh của mình. Điều này thường được thực hiện khi bạn muốn lấy thêm thông tin từ người dùng sau khi họ nhập thông tin đầu vào khác. Chẳng hạn, giả sử một khi người dùng chọn "Có" trong nhóm nút radio, thì bạn sẽ hiển thị các hộp kiểm để biết thêm thông tin. Điều này có thể được thực hiện bằng các hàm JavaScript và phương thức "createElement"

Hãy thay đổi biểu mẫu của chúng tôi để hiển thị hai nút radio hiển thị các hộp kiểm khi người dùng chọn "Có. "

Bạn có thích Javascript không?

     

Chúng tôi đã thêm một số chức năng vào biểu mẫu và các chức năng JavaScript của chúng tôi. Đầu tiên, chúng tôi đã thêm một nút radio. Lưu ý rằng chúng tôi đã sử dụng thuộc tính "tên" và cả hai nút radio đều có cùng tên. Mặc dù mỗi phần tử phải có một thuộc tính id duy nhất, nhưng chúng có thể có cùng tên. Các nút radio và hộp kiểm thường có cùng tên để nhóm chúng lại với nhau. Khi một nút radio được chọn, bất kỳ hộp nào hiện đang được chọn sẽ không được chọn. Điều này có nghĩa là người dùng chỉ có thể chọn một hộp radio. Hộp kiểm được sử dụng cho nhiều giá trị tùy chọn.  

Chức năng JavaScript chỉ kích hoạt nếu nút radio "Có" được nhấp. Hàm kiểm tra xem nút radio có trả về "true" cho đã chọn hay không và nếu vậy, hãy thêm một hộp kiểm vào div với id "moreCheckboxes. " Trong ví dụ này, chúng tôi thêm HTML thực tế cho hộp kiểm và chúng tôi chỉ thêm một hộp kiểm vào div. Nếu người dùng quyết định thay đổi câu trả lời thành "Không", hộp kiểm sẽ bị xóa khỏi div. Lưu ý rằng chúng tôi đã thêm thuộc tính id vào nút radio sử dụng câu trả lời "Có". Nút radio có id là "iLikeJs" được truy xuất trong hàm JavaScript và thuộc tính "đã kiểm tra" được xác định. Giá trị này trả về đúng hoặc sai và đó là thuộc tính tự nhiên có trong định nghĩa đối tượng phần tử biểu mẫu HTML.  

Đoạn mã trên là một ví dụ về cách làm việc linh hoạt với các biểu mẫu và thêm và xóa các phần tử khi bạn nhận được đầu vào của người dùng.  

Tự động làm việc với các hộp chọn

Chúng ta đã nói về cách làm việc động với các phần tử khi bạn nhận đầu vào của người dùng và một phần tử biểu mẫu phổ biến được sử dụng với JavaScript và tải động là hộp chọn. Hộp chọn là phần tử thả xuống hiển thị một số giá trị. Từ danh sách, người dùng có thể chọn một tùy chọn. Điều gì sẽ xảy ra nếu bạn có hàng trăm tùy chọn, nhưng bạn chỉ muốn hiển thị một số tùy chọn cho người dùng dựa trên một số loại đầu vào?. Điều này phổ biến khi bạn có quá nhiều giá trị thả xuống để hiển thị cho người dùng, do đó, người dùng có thể quá khó khăn khi tìm một phần tử cụ thể. Chẳng hạn, bạn sẽ không hiển thị các tiểu bang có danh sách các quốc gia. Tuy nhiên, bạn có thể tự động điền vào danh sách các trạng thái dựa trên quốc gia mà người dùng chọn từ một hộp chọn khác. Phần này sẽ chỉ cho bạn cách điền vào hộp chọn sau khi người dùng gửi thông tin nhập từ hộp radio

Bạn có thích Javascript không?

     

Trong ví dụ này, chúng tôi đang sử dụng logic tương tự ngoại trừ thay vì hộp kiểm, chúng tôi đã cung cấp cho người dùng danh sách các tùy chọn từ hộp chọn. Khi người dùng nhấp vào nút radio "Có", một danh sách các tùy chọn sẽ được điền trong hộp chọn hộp thả xuống có tên "selectBoxOptions. "

Trang này logic hơn những trang khác. Đầu tiên, chúng tôi sử dụng cùng một chức năng ngoại trừ việc chúng tôi xóa các tùy chọn hộp chọn mỗi lần. Lý do chúng tôi xóa hộp văn bản là vì chức năng chắp thêm tiếp tục thêm nhiều tùy chọn hơn vào trình đơn thả xuống thay vì xóa danh sách hiện tại và thay thế bằng danh sách mới. Điều này rất quan trọng khi bạn làm việc với hộp chọn động. Bằng cách đặt độ dài tùy chọn thành 0, phần tử không còn có bất kỳ phần tử nào được liệt kê. Tuy nhiên, nếu nút radio "Có" được chọn, hai tùy chọn sẽ được hiển thị cho người dùng. Đầu tiên là "Bởi vì tôi thích nó" và thứ hai là "Bởi vì nó năng động. " Lưu ý rằng văn bản và giá trị khác nhau. Giá trị là những gì bạn lưu trữ trong cơ sở dữ liệu hoặc sử dụng để xử lý biểu mẫu trong khi văn bản chỉ được hiển thị cho người dùng.  

Bài học này bao gồm một số khái niệm trong JavaScript và các biểu mẫu. Các biểu mẫu HTML có thể dài một số phần tử với một số tùy chọn khi bạn tự động tạo và xóa các phần tử. Hàm JavaScript có thể là hàng trăm dòng mã. Tuy nhiên, tốt nhất bạn nên bắt đầu thực hành với một số phần tử biểu mẫu, viết một số mã JavaScript và mở rộng logic của bạn sau. Điều này sẽ loại bỏ các lỗi logic và giúp bạn thực hành với động lực biểu mẫu trước khi đi sâu vào chức năng phức tạp hơn

Bạn có thể gửi biểu mẫu bằng JavaScript không?

Làm cách nào để thêm biểu mẫu trong JavaScript?

Làm cách nào để lấy FormData trong JavaScript?