Javascript tạo biểu mẫu và gửi

• Đầu tiên là "hành động" có chứa một URL (xử lý việc gửi quy trình biểu mẫu)
• Thuộc tính thứ hai là “phương thức” có phương thức HTTP

Một phương thức HTTP có thể có nhiều loại khác nhau và hai loại được sử dụng phổ biến nhất là

• GET (được sử dụng để lấy một số dữ liệu từ máy chủ)
• POST (được sử dụng để ghi dữ liệu lên máy chủ)

Tuy nhiên, chúng tôi sẽ không sử dụng hai thuộc tính này trong bài đăng này vì chúng tôi không làm việc với máy chủ

Bây giờ chúng ta hãy viết mã HTML để tạo biểu mẫu

<. LOẠI TÀI LIỆU html>

< html lang="vi">

< đầu >

< tiêu đề > Gửi biểu mẫu bằng JavaScript << /title>

< /đầu >

< nội dung >

< form id="myForm">

<. -- Trường nhập liệu -->

< đầu vào loại="văn bản" name="username" id="username" placeholder="Enter your Username">

< đầu vào loại="mật khẩu" name="password" id="password" placeholder="Enter your Password">

<. -- khi nhấp vào nút bên dưới, biểu mẫu sẽ được gửi -->

< nút loại="gửi">Submit</button>

< /biểu mẫu >

< script src="mã. js" >< /tập lệnh >

< /body >

< /html >

Trong đoạn mã trên, chúng tôi đã tạo một biểu mẫu và cung cấp thuộc tính id cho biểu mẫu có ý nghĩa mà chúng ta sẽ thấy sau một thời gian. Tiếp theo, chúng tôi đã xác định hai trường đầu vào và sau đó xác định một nút có loại gửi. Cuối cùng, chúng tôi đã đặt một thẻ script và tham chiếu tên tệp “code. js” sẽ chứa mã JavaScript của chúng tôi

Truy cập Biểu mẫu và truy xuất Giá trị từ biểu mẫu

Bây giờ chúng ta đã hoàn thành việc tạo biểu mẫu của mình, hãy truy cập biểu mẫu này từ JavaScript và sau đó truy xuất các giá trị của tên người dùng và mật khẩu có trong thẻ biểu mẫu. Để truy cập biểu mẫu, chúng tôi sẽ sử dụng thuộc tính id được đề cập trước đó thông qua đoạn mã sau

var myForm = . getElementById('myForm');

Theo cách tương tự, chúng ta cũng có thể lấy các giá trị từ các trường đầu vào bằng cách sử dụng thuộc tính id được cung cấp trong biểu mẫu HTML. Sự khác biệt duy nhất là chúng tôi sẽ cung cấp giá trị ở cuối getElementById để chúng tôi có thể truy xuất giá trị từ trường đầu vào chứ không phải chính phần tử đó

var tên người dùng = tài liệu. getElementById('tên người dùng').giá trị;

var password = tài liệu. getElementById('password').giá trị;

Gửi biểu mẫu và xác thực dữ liệu

Để gửi biểu mẫu, chúng tôi sẽ sử dụng trình lắng nghe sự kiện để lắng nghe một người nghe được chỉ định liên tục. Một sự kiện chỉ đơn giản là sự tương tác của HTML và JavaScript được kích hoạt bởi người dùng hoặc trình duyệt khi người dùng thao tác trên một trang và sự kiện này được xử lý bởi trình xử lý sự kiện

var myForm = . getElementById('myForm');
// Trình lắng nghe sự kiện lắng nghe sự kiện gửi
myForm. addEventListener("gửi" , chức năng (e){
    e. ngăn chặn Mặc định();
//lấy giá trị
var tên người dùng = tài liệu. getElementById('tên người dùng').giá trị;
var password = tài liệu. getElementById('password').giá trị;

// xác thực các trường tên người dùng và mật khẩu
if( tên người dùng =='' || mật khẩu ==''){
      cảnh báo ("Vui lòng điền vào tất cả các trường bắt buộc");
    }
khác{
      cảnh báo ("Gửi biểu mẫu thành công");
    }
})

Trong đoạn mã trên, đầu tiên, chúng ta lấy tham chiếu của biểu mẫu bằng thuộc tính id và sau đó khởi tạo một trình lắng nghe sự kiện “gửi” trên biểu mẫu này. Hàm được chỉ định trong trình xử lý sự kiện sẽ được gọi khi người dùng nhấp vào nút gửi

Bên trong chức năng, chúng tôi đã thực hiện xác thực của mình, nghĩa là nếu các trường nhập tên người dùng hoặc mật khẩu trống thì chúng tôi sẽ thấy một thông báo trong hộp cảnh báo cho biết Vui lòng điền tất cả các trường bắt buộc nếu không chúng tôi sẽ nhận được thông báo Gửi biểu mẫu thành công

Hãy để chúng tôi kiểm tra trước bằng cách nhấp vào nút gửi để trống hai trường nhập liệu

Bây giờ chúng ta hãy điền vào hai trường và xem đầu ra

Phần kết luận

Forms are very helpful in gathering data from users and then manipulating or playing with that data in JavaScript. In this post, we took help from an HTML tag to initialize a form and then went on to define two input fields and a button. Next, we accessed the form element inside a javascript file and then retrieved the values of form input fields using the id attribute.

Cuối cùng, chúng tôi đã trả lời câu hỏi về cách gửi biểu mẫu bằng JavaScript bằng cách khởi tạo trình xử lý sự kiện sẽ lắng nghe sự kiện gửi và bất cứ khi nào người dùng nhấp vào nút gửi, sự kiện này sẽ được kích hoạt. Chúng tôi cũng đã xác thực các trường đầu vào của mình bên trong chức năng trình xử lý sự kiện

Làm cách nào để tạo và gửi biểu mẫu trong JavaScript?

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

Làm cách nào để gửi dữ liệu biểu mẫu trong JavaScript?

Làm cách nào để tạo nút gửi trong JavaScript?