Hướng dẫn how do we submit the form in javascript? - làm thế nào để chúng tôi gửi biểu mẫu trong javascript?

Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu về API biểu mẫu JavaScript: truy cập vào biểu mẫu, nhận các giá trị của các yếu tố, xác thực dữ liệu biểu mẫu và gửi biểu mẫu.: in this tutorial, you will learn about JavaScript form API: accessing the form, getting values of the elements, validating form data, and submitting the form.

Hình thức cơ bản

Để tạo biểu mẫu trong HTML, bạn sử dụng phần tử

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

Phần tử

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

• Thuộc tính

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  7 chỉ định một URL sẽ xử lý trình gửi biểu mẫu. Trong ví dụ này, hành động là URL

  const form = document.getElementById('subscribe');
  Code language: JavaScript (javascript)
  

  0.
• Thuộc tính

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  8 Chỉ định phương thức HTTP để gửi biểu mẫu với. Thông thường, phương pháp là

  const form = document.getElementById('subscribe');
  Code language: JavaScript (javascript)
  

  2 hoặc

  const form = document.getElementById('subscribe');
  Code language: JavaScript (javascript)
  

  3.

Nói chung, bạn sử dụng phương thức

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

JavaScript sử dụng đối tượng

const form = document.getElementById('subscribe');



Code language: JavaScript (javascript)

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

• <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  7 - là URL xử lý dữ liệu biểu mẫu. Nó tương đương với thuộc tính

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  7 của phần tử

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  5.

• <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  8 - là phương thức HTTP tương đương với thuộc tính

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  8 của phần tử

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  5.

Phần tử

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

• document.forms
  Code language: JavaScript (javascript)

  5 - Gửi biểu mẫu.

• document.forms
  Code language: JavaScript (javascript)

  6 - Đặt lại biểu mẫu.

Tham chiếu các hình thức

Để tham khảo phần tử

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

document.forms
Code language: JavaScript (javascript)

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

Một tài liệu HTML có thể có nhiều biểu mẫu. Thuộc tính

document.forms
Code language: JavaScript (javascript)

document.forms[0]
Code language: CSS (css)

document.forms
Code language: JavaScript (javascript)

Để tham khảo một biểu mẫu, bạn sử dụng một chỉ mục. Ví dụ: câu lệnh sau trả về dạng đầu tiên của tài liệu HTML:

document.forms[0]
Code language: CSS (css)

Gửi một biểu mẫu

Thông thường, một biểu mẫu có một nút gửi. Khi bạn nhấp vào nó, trình duyệt sẽ gửi dữ liệu biểu mẫu đến máy chủ. Để tạo nút gửi, bạn sử dụng phần tử

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

Hoặc

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

Nếu nút gửi có tiêu điểm và bạn nhấn phím

document.forms[0]
Code language: CSS (css)

Khi bạn gửi biểu mẫu, sự kiện

document.forms[0]
Code language: CSS (css)

Để đính kèm trình nghe sự kiện vào sự kiện

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

Để ngăn biểu mẫu được gửi, bạn gọi phương thức

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

$hidden_forum = '

    
    
';

Thông thường, bạn gọi phương thức

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

document.forms
Code language: JavaScript (javascript)

$hidden_forum = '

    
    
';

Lưu ý rằng

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

document.forms[0]
Code language: CSS (css)

Truy cập các trường biểu mẫu

Để truy cập các trường biểu mẫu, bạn có thể sử dụng các phương thức DOM như

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

document.forms
Code language: JavaScript (javascript)

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

Ngoài ra, bạn có thể sử dụng thuộc tính

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

JavaScript cho phép bạn truy cập một phần tử theo chỉ mục, ID hoặc tên. Giả sử rằng bạn có biểu mẫu đăng ký sau với hai yếu tố

document.forms[0]
Code language: CSS (css)

$hidden_forum = '

    
    
';

Để truy cập các phần tử của biểu mẫu, bạn sẽ nhận phần tử biểu mẫu trước:

$hidden_forum = '

    
    
';

Và sử dụng chỉ mục, ID hoặc tên để truy cập phần tử. Các phần sau truy cập phần tử biểu mẫu đầu tiên:

$hidden_forum = '

    
    
';

Các phần sau truy cập phần tử đầu vào thứ hai:

$hidden_forum = '

    
    
';

Sau khi truy cập trường biểu mẫu, bạn có thể sử dụng thuộc tính

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

$hidden_forum = '

    
    
';

Đặt tất cả lại với nhau: Mẫu đăng ký

Sau đây minh họa tài liệu HTML có mẫu đăng ký. Xem bản demo trực tiếp ở đây.

$hidden_forum = '

    
    
';

Tài liệu HTML tham chiếu các tệp

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

document.forms[0]
Code language: CSS (css)

Gửi biểu mẫu mà không cung cấp bất kỳ thông tin nào sẽ dẫn đến lỗi sau:

Gửi biểu mẫu với tên nhưng định dạng địa chỉ email không hợp lệ sẽ dẫn đến lỗi sau:

Sau đây hiển thị tệp

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

$hidden_forum = '

    
    
';

Làm thế nào nó hoạt động.

Hàm showMessage ()

Hàm

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

$hidden_forum = '

    
    
';

Sau đây hiển thị trường đầu vào tên trên biểu mẫu:

Forum

Nếu giá trị tên của tên trống, bạn cần phải có được cha mẹ trước đó là

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

Forum

Tiếp theo, bạn cần chọn phần tử

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

Forum

Sau đó, cập nhật thông báo:

Forum

Sau đó, chúng tôi thay đổi lớp CSS của trường đầu vào dựa trên giá trị của tham số loại. Nếu loại là đúng, chúng tôi thay đổi lớp đầu vào thành thành công. Nếu không, chúng tôi thay đổi lớp thành lỗi.

Forum

Cuối cùng, trả lại giá trị của loại:

Forum

Các chức năng của vòi hoa sen () và showcess ()

Các hàm

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

<button type="submit">Subscribebutton>
Code language: HTML, XML (xml)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

Forum

Hàm HasValue ()

Hàm

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

Forum

Hàm validateMail ()

Hàm

$hidden_forum = '

    
    
';

Forum

Hàm

$hidden_forum = '

    
    
';

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

$hidden_forum = '

    
    
';

Để xác thực email, nó sử dụng một biểu thức chính quy. Nếu email không hợp lệ, hàm

$hidden_forum = '

    
    
';

$hidden_forum = '

    
    
';

Người xử lý sự kiện gửi

Đầu tiên, chọn biểu mẫu đăng ký bằng ID của nó bằng phương thức

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

Forum

Thứ hai, xác định một số hằng số để lưu trữ thông báo lỗi:

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

Thứ ba, thêm trình nghe sự kiện

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

<form action="/signup" method="post" id="signup"> 
form>
Code language: HTML, XML (xml)

Trong phần xử lý sự kiện:

1. Dừng đệ trình biểu mẫu bằng cách gọi phương thức

   <input type="submit" value="Subscribe">
   Code language: HTML, XML (xml)
   

   1.
2. Xác thực các trường tên và email bằng các hàm

   const form  = document.getElementById('signup');
   
   form.addEventListener('submit', (event) => {
       // handle the form data
   });
   Code language: JavaScript (javascript)

   9 và

   $hidden_forum = '
   
       
       
   ';
   

   02.
3. Nếu cả tên và email đều hợp lệ, hãy hiển thị cảnh báo. Trong một ứng dụng trong thế giới thực, bạn cần gọi phương thức

   <input type="submit" value="Subscribe">
   Code language: HTML, XML (xml)
   

   3 để gửi biểu mẫu.

Bản tóm tắt

• Sử dụng phần tử

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  5 để tạo biểu mẫu HTML.
• Sử dụng các phương thức DOM như

  document.forms
  Code language: JavaScript (javascript)

  8 và

  <input type="submit" value="Subscribe">
  Code language: HTML, XML (xml)
  

  7 để chọn phần tử

  <form action="/signup" method="post" id="signup"> 
  form>
  Code language: HTML, XML (xml)

  5.

  $hidden_forum = '
  
      
      
  ';
  

  19 cũng trả về phần tử biểu mẫu bằng một chỉ mục số.
• Sử dụng

  <button type="submit">Subscribebutton>
  Code language: HTML, XML (xml)

  0 để truy cập các yếu tố biểu mẫu.
• Sự kiện

  document.forms[0]
  Code language: CSS (css)

  3 bắn khi người dùng nhấp vào nút Gửi trên biểu mẫu.

Hướng dẫn này có hữu ích không?