Cách hiển thị thông báo sau khi gửi biểu mẫu trong HTML bằng javascript

Mỗi biểu mẫu có thể chứa một mã JavaScript trong đó, đó là thứ chúng ta cần có thông báo Cảm ơn bên trong một cửa sổ bật lên


1. Chúng tôi cần chế độ xem biểu mẫu chính, trong trường hợp của chúng tôi, đó là phần tử có id

document.forms

Code language: JavaScript (javascript)
00

This is my first part of the form.

 

2. Sau đó, chúng tôi sẽ tạo phần cảm ơn, hãy tạo một phần tử có id

document.forms

Code language: JavaScript (javascript)
01 và với thuộc tính kiểu ẩn

Thí dụ

Thực thi JavaScript khi biểu mẫu được gửi


  Nhập tên.
 
Tự mình thử »


Định nghĩa và cách sử dụng

Sự kiện onsubmit xảy ra khi một biểu mẫu được gửi


Hỗ trợ trình duyệt

EventonsubmitCóCóCóCóCó

cú pháp

Trong JavaScript, sử dụng phương thức addEventListener()

sự vật. addEventListener("gửi", myScript);

Tự mình thử »


chi tiết kỹ thuật

bong bóng. CóCó thể hủy. Có Loại sự kiện. Các thẻ HTML được hỗ trợ sự kiện. Phiên bản DOM. Sự kiện cấp 2

Bản tóm tắt. trong hướng dẫn này, bạn sẽ tìm hiểu về JavaScript form API. truy cập biểu mẫu, nhận giá trị của các phần tử, xác thực dữ liệu biểu mẫu và gửi biểu mẫu

Khái niệm cơ bản về biểu mẫu

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

document.forms

Code language: JavaScript (javascript)
9

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)

Phần tử

document.forms

Code language: JavaScript (javascript)
9 có hai thuộc tính quan trọng.

document.forms[0]

Code language: CSS (css)
1 và

document.forms[0]

Code language: CSS (css)
2

  • Thuộc tính

    document.forms[0]

    Code language: CSS (css)
    1 chỉ định một URL sẽ xử lý việc gửi biểu mẫu. Trong ví dụ này, hành động là URL

    document.forms[0]

    Code language: CSS (css)
    4
  • Thuộc tính

    document.forms[0]

    Code language: CSS (css)
    2 chỉ định phương thức HTTP để gửi biểu mẫu với. Thông thường, phương pháp này là

    document.forms[0]

    Code language: CSS (css)
    6 hoặc

    document.forms[0]

    Code language: CSS (css)
    7

Nói chung, bạn sử dụng phương pháp

document.forms[0]

Code language: CSS (css)
7 khi muốn lấy dữ liệu từ máy chủ và phương pháp

document.forms[0]

Code language: CSS (css)
6 khi bạn muốn thay đổi dữ liệu trên máy chủ

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

document.forms

Code language: JavaScript (javascript)
30 để biểu diễn một biểu mẫu.

document.forms

Code language: JavaScript (javascript)
30 có các thuộc tính sau tương ứng với các thuộc tính HTML

  • document.forms[0]

    Code language: CSS (css)
    1 – là URL xử lý dữ liệu biểu mẫu. Nó tương đương với thuộc tính

    document.forms[0]

    Code language: CSS (css)
    1 của phần tử

    document.forms

    Code language: JavaScript (javascript)
    9
  • document.forms[0]

    Code language: CSS (css)
    2 – là phương thức HTTP tương đương với thuộc tính

    document.forms[0]

    Code language: CSS (css)
    2 của phần tử

    document.forms

    Code language: JavaScript (javascript)
    9

Phần tử

document.forms

Code language: JavaScript (javascript)
30 cũng cung cấp các phương thức hữu ích sau

  • document.forms

    Code language: JavaScript (javascript)
    39 – gửi biểu mẫu
  • <form action="/signup" method="post" id="signup"> form>

    Code language: HTML, XML (xml)
    30 – đặt lại biểu mẫu

biểu mẫu tham khảo

Để tham chiếu phần tử

document.forms

Code language: JavaScript (javascript)
9, bạn có thể sử dụng các phương thức chọn DOM như

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
32

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
6

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

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
33 trả về một tập hợp các biểu mẫu (

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
34) trên tài liệu

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 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ử

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
35 hoặc

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
36 với loại

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
37

document.forms

Code language: JavaScript (javascript)
3

Hoặc

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
3

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

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
38, thì trình duyệt cũng gửi dữ liệu biểu mẫu

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

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
37 sẽ được kích hoạt trước khi yêu cầu được gửi đến máy chủ. Điều này cho bạn cơ hội xác thực dữ liệu biểu mẫu. Nếu dữ liệu biểu mẫu không hợp lệ, bạn có thể ngừng gửi biểu mẫu

Để đính kèm một trình lắng nghe sự kiện vào sự kiện

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
37, bạn sử dụng phương thức

document.forms

Code language: JavaScript (javascript)
91 của phần tử biểu mẫu như sau

document.forms

Code language: JavaScript (javascript)
9

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

document.forms

Code language: JavaScript (javascript)
92 của đối tượng

document.forms

Code language: JavaScript (javascript)
93 bên trong trình xử lý sự kiện

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
37 như thế này

document.forms[0]

Code language: CSS (css)
4

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

document.forms

Code language: JavaScript (javascript)
95 nếu dữ liệu biểu mẫu không hợp lệ. Để gửi biểu mẫu trong JavaScript, bạn gọi phương thức

document.forms

Code language: JavaScript (javascript)
39 của đối tượng biểu mẫu

document.forms[0]

Code language: CSS (css)
7

Lưu ý rằng

document.forms

Code language: JavaScript (javascript)
97 không kích hoạt sự kiện

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
37. Do đó, bạn phải luôn xác thực biểu mẫu trước khi gọi phương thức này

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ư

document.forms

Code language: JavaScript (javascript)
99,

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
32,

document.forms[0]

Code language: CSS (css)
41, v.v.

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

document.forms[0]

Code language: CSS (css)
42 của đối tượng

document.forms[0]

Code language: CSS (css)
43. Thuộc tính

document.forms[0]

Code language: CSS (css)
44 lưu trữ một tập hợp các phần tử biểu mẫu

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 phần tử

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
35

document.forms[0]

Code language: CSS (css)
7

Để truy cập các phần tử của biểu mẫu, trước tiên bạn lấy phần tử biểu mẫu

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
60

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

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
61

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

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
62

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

document.forms[0]

Code language: CSS (css)
46 để truy cập giá trị của nó, chẳng hạn

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
63

Đặt nó tất cả cùng nhau. hình thức đăng ký

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

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
64

Tài liệu HTML tham khảo các tệp

document.forms[0]

Code language: CSS (css)
47 và

document.forms[0]

Code language: CSS (css)
48. Nó sử dụng phần tử

document.forms[0]

Code language: CSS (css)
49 để hiển thị thông báo lỗi trong trường hợp phần tử

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
35 có dữ liệu không hợp lệ

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

Cách hiển thị thông báo sau khi gửi biểu mẫu trong HTML bằng javascript
Cách hiển thị thông báo sau khi gửi biểu mẫu trong HTML bằng javascript

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

Cách hiển thị thông báo sau khi gửi biểu mẫu trong HTML bằng javascript
Cách hiển thị thông báo sau khi gửi biểu mẫu trong HTML bằng javascript

Phần sau hiển thị tệp

document.forms[0]

Code language: CSS (css)
71 hoàn chỉnh

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
65

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

Hàm showMessage()

Hàm

document.forms[0]

Code language: CSS (css)
72 chấp nhận một phần tử đầu vào, một thông báo và một loại

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
66

Sau đây hiển thị trường nhập tên trên biểu mẫu

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
67

Nếu giá trị của tên trống, trước tiên bạn cần lấy cha của nó là

document.forms[0]

Code language: CSS (css)
73 với lớp “trường”

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
68

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

document.forms[0]

Code language: CSS (css)
49

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
69

Sau đó, cập nhật tin nhắn

document.forms

Code language: JavaScript (javascript)
0

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 của đầu vào thành công. Nếu không, chúng tôi thay đổi lớp thành lỗi

document.forms

Code language: JavaScript (javascript)
1

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

document.forms

Code language: JavaScript (javascript)
2

Hàm showError() và showSuccess()

Hàm

document.forms[0]

Code language: CSS (css)
75 và

document.forms[0]

Code language: CSS (css)
76 gọi hàm

document.forms[0]

Code language: CSS (css)
72. Hàm

document.forms[0]

Code language: CSS (css)
75 luôn trả về

document.forms[0]

Code language: CSS (css)
79 trong khi hàm

document.forms[0]

Code language: CSS (css)
76 luôn trả về

document.forms[0]

Code language: CSS (css)
71. Ngoài ra, hàm

document.forms[0]

Code language: CSS (css)
76 đặt thông báo lỗi thành một chuỗi trống

document.forms

Code language: JavaScript (javascript)
3

Hàm hasValue()

Hàm

document.forms[0]

Code language: CSS (css)
73 kiểm tra xem một phần tử đầu vào có giá trị hay không và hiển thị thông báo lỗi bằng cách sử dụng hàm

document.forms[0]

Code language: CSS (css)
75 hoặc

document.forms[0]

Code language: CSS (css)
76 tương ứng

document.forms

Code language: JavaScript (javascript)
4

Hàm xác thựcEmail()

Hàm

document.forms[0]

Code language: CSS (css)
76 xác thực nếu trường email chứa địa chỉ email hợp lệ

document.forms

Code language: JavaScript (javascript)
5

Hàm

document.forms[0]

Code language: CSS (css)
76 gọi hàm

document.forms[0]

Code language: CSS (css)
73 để kiểm tra xem giá trị trường có trống không. Nếu trường đầu vào trống, nó sẽ hiển thị

document.forms[0]

Code language: CSS (css)
79

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

document.forms[0]

Code language: CSS (css)
76 hiển thị

<form action="/signup" method="post" id="signup"> form>

Code language: HTML, XML (xml)
601

Cách hiển thị thông báo sau khi gửi biểu mẫu trong HTML bằng HTML?

Có 2 cách chung để hiển thị thông báo sau khi gửi biểu mẫu HTML. Sử dụng Javascript AJAX để gửi biểu mẫu và hiển thị thông báo khi quá trình xử lý hoàn tất . Gửi biểu mẫu như bình thường và yêu cầu tập lệnh phía máy chủ trả lại cờ để hiển thị thông báo.

Dữ liệu từ một biểu mẫu HTML được gửi tới một URL như thế nào sau khi nó được gửi?

Dữ liệu được thêm vào URL dưới dạng một chuỗi các cặp tên/giá trị . Sau khi địa chỉ web URL kết thúc, chúng tôi bao gồm một dấu chấm hỏi ( ? ), theo sau là các cặp tên/giá trị, mỗi cặp được phân tách bằng dấu và ( & ).

Điều gì xảy ra sau khi gửi biểu mẫu trong HTML?

Hầu hết các biểu mẫu HTML đều có nút gửi ở cuối biểu mẫu. Khi tất cả các trường trong biểu mẫu đã được điền vào, người dùng nhấp vào nút gửi để ghi lại dữ liệu biểu mẫu. Hành vi tiêu chuẩn là thu thập tất cả dữ liệu đã được nhập vào biểu mẫu và gửi dữ liệu đó đến một chương trình khác để xử lý .

Làm cách nào để hiển thị thông báo sau khi gửi biểu mẫu trong asp net?

Khi nút Gửi được nhấp, trước tiên, bản ghi được chèn vào cơ sở dữ liệu và sau đó sử dụng hàm RegisterStartupScript của ClientScript, thông báo thành công được hiển thị trong hộp thông báo cảnh báo JavaScript. script – The JavaScript code that will display the Alert message box.