Hiển thị thông báo khi gửi trong JavaScript

xin chào, bạn đã xem những hướng dẫn này chưa?

Hiển thị thông báo khi gửi trong JavaScript
[Hướng dẫn hỗ trợ] Biểu mẫu của tôi hiển thị bằng JavaScript nhưng sẽ không hoạt động bình thường Hướng dẫn hỗ trợ

Đánh giá lần cuối. Tháng 9 năm 2021 Đừng sợ, chỉ cần đảm bảo rằng bạn có thêm một số thứ có thể giúp mọi thứ hoạt động hiệu quả. Nguyên nhân thường gặp nhất của sự cố với các biểu mẫu JS là bạn (hoặc trình tạo trang tĩnh của bạn) cần tạo một phiên bản HTML của biểu mẫu để phù hợp với phiên bản JavaScript của bạn. Một số khung như gatsby/reac có thể tự động thực hiện việc này, nhưng phần quan trọng là phiên bản HTML PHẢI khớp chính xác với những gì JS của bạn gửi. cùng tên biểu mẫu và tên trường. Bạn phải…

Hiển thị thông báo khi gửi trong JavaScript
[Hướng dẫn hỗ trợ] Tôi không thấy các lượt gửi biểu mẫu khi sử dụng JavaScript Hướng dẫn hỗ trợ

Tôi có một biểu mẫu được hiển thị bằng JavaScript, nhưng nó không gửi. Điều gì đang xảy ra? . Nếu bạn đã hiển thị biểu mẫu của mình bằng JavaScript và không sử dụng Trình tạo trang tĩnh (hoặc, trình tạo của bạn không hiển thị nó xuống HTML như Gatsby đã làm), bạn sẽ cần đảm bảo rằng bạn có phiên bản HTML thuần, ẩn của biểu mẫu của mình. . Điều này có nghĩa là…

Hiển thị thông báo khi gửi trong JavaScript
[Hướng dẫn hỗ trợ] Sự cố về biểu mẫu, gỡ lỗi biểu mẫu, 404 khi gửi Hướng dẫn hỗ trợ

Được đánh giá lần cuối vào tháng 11 năm 2022 Vui lòng thử các mẹo gỡ lỗi này trước khi đăng bài mới. Nếu không có đề xuất nào hiệu quả, vui lòng bao gồm thông tin mà chúng tôi yêu cầu ở cuối hướng dẫn này trong bài đăng mới mà bạn tạo. Cảm ơn bạn. Tại sao nên sử dụng Biểu mẫu? . Có nhiều cách sử dụng biểu mẫu. biểu mẫu liên hệ, chẳng hạn như biểu mẫu liên hệ và biểu mẫu đăng ký. Thấy có nhiều loại…

Các phần tử của loại submit được hiển thị dưới dạng các nút. Khi sự kiện click xảy ra (thường là do người dùng đã nhấp vào nút), tác nhân người dùng sẽ cố gắng gửi biểu mẫu đến máy chủ

Thuộc tính của phần tử chứa một chuỗi được hiển thị dưới dạng nhãn của nút. Các nút không có giá trị thực nếu không

<input type="submit" value="Send Request" />

Nếu bạn không chỉ định một value, thì nút này sẽ có nhãn mặc định, do tác nhân người dùng chọn. Nhãn này có thể là một cái gì đó dọc theo dòng "Gửi" hoặc "Gửi truy vấn. " Đây là ví dụ về nút gửi có nhãn mặc định trong trình duyệt của bạn

<input type="submit" />

Ngoài các thuộc tính được chia sẻ bởi tất cả các phần tử , đầu vào nút submit hỗ trợ các thuộc tính sau

Một chuỗi cho biết URL để gửi dữ liệu. Thuộc tính này được ưu tiên hơn thuộc tính trên phần tử

<input type="submit" />
4 sở hữu

Thuộc tính này cũng có sẵn trên các phần tử

<input type="submit" />
6 và
<input type="submit" />
7

Một chuỗi xác định phương thức mã hóa sẽ sử dụng khi gửi dữ liệu biểu mẫu tới máy chủ. Có ba giá trị được phép

<input type="submit" />
8

Giá trị mặc định này sẽ gửi dữ liệu biểu mẫu dưới dạng chuỗi sau khi URL mã hóa văn bản bằng thuật toán, chẳng hạn như

<input type="submit" />
9

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>
0

Sử dụng API

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>
1 để quản lý dữ liệu, cho phép các tệp được gửi đến máy chủ. Bạn phải sử dụng loại mã hóa này nếu biểu mẫu của bạn bao gồm bất kỳ yếu tố nào của
<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>
4 (
<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>
5)

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>
6

Văn bản thô;

Nếu được chỉ định, giá trị của thuộc tính

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>
7 sẽ ghi đè thuộc tính của biểu mẫu sở hữu

Thuộc tính này cũng có sẵn trên các phần tử

<input type="submit" />
6 và
<input type="submit" />
7

Một chuỗi cho biết phương thức HTTP sẽ sử dụng khi gửi dữ liệu của biểu mẫu; . giá trị được phép là

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  div>
form>
2

URL được tạo bằng cách bắt đầu bằng URL được cung cấp bởi

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  div>
form>
3 hoặc thuộc tính, nối thêm ký tự dấu chấm hỏi ("?"), sau đó nối thêm dữ liệu của biểu mẫu, được mã hóa như mô tả của
<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>
7 hoặc thuộc tính của biểu mẫu. URL này sau đó được gửi đến máy chủ bằng yêu cầu HTTP
<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  div>
form>
2. Phương pháp này hoạt động tốt đối với các biểu mẫu đơn giản chỉ chứa các ký tự ASCII và không có tác dụng phụ. Đây là giá trị mặc định

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  div>
form>
8

Dữ liệu của biểu mẫu được bao gồm trong phần nội dung của yêu cầu được gửi tới URL được cung cấp bởi

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  div>
form>
3 hoặc thuộc tính bằng cách sử dụng phương thức HTTP
<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  div>
form>
8. Phương pháp này hỗ trợ dữ liệu phức tạp và tệp đính kèm

<input type="submit" value="Send" disabled />
2

Phương pháp này được sử dụng để chỉ ra rằng nút đóng hộp thoại liên quan đến đầu vào và hoàn toàn không truyền dữ liệu biểu mẫu

Thuộc tính này cũng có sẵn trên các phần tử

<input type="submit" />
6 và
<input type="submit" />
7

Thuộc tính Boolean, nếu có, chỉ định rằng biểu mẫu không được xác thực trước khi gửi tới máy chủ. Điều này ghi đè giá trị của thuộc tính trên biểu mẫu sở hữu của phần tử

Thuộc tính này cũng có sẵn trên các phần tử

<input type="submit" />
6 và
<input type="submit" />
7

Một chuỗi chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Chuỗi phải là tên của bối cảnh duyệt web (nghĩa là tab, cửa sổ hoặc

<input type="submit" value="Send" disabled />
8). Một giá trị được chỉ định ở đây sẽ ghi đè bất kỳ mục tiêu nào được cung cấp bởi thuộc tính trên
<input type="submit" />
4 sở hữu đầu vào này

Ngoài tên thực của tab, cửa sổ hoặc khung nội tuyến, có một vài từ khóa đặc biệt có thể được sử dụng

1

Tải phản hồi vào ngữ cảnh duyệt giống như ngữ cảnh chứa biểu mẫu. Thao tác này sẽ thay thế tài liệu hiện tại bằng dữ liệu nhận được. Đây là giá trị mặc định được sử dụng nếu không có giá trị nào được chỉ định

2

Tải phản hồi vào ngữ cảnh duyệt web mới, chưa được đặt tên. Đây thường là một tab mới trong cùng một cửa sổ với tài liệu hiện tại, nhưng có thể khác tùy thuộc vào cấu hình của tác nhân người dùng

3

Tải phản hồi vào ngữ cảnh duyệt chính của ngữ cảnh hiện tại. Nếu không có ngữ cảnh gốc, điều này sẽ hoạt động giống như 1

5

Tải phản hồi vào bối cảnh duyệt cấp cao nhất; . Nếu bối cảnh hiện tại là bối cảnh trên cùng, điều này sẽ hoạt động giống như 1

Thuộc tính này cũng có sẵn trên các phần tử

<input type="submit" />
6 và
<input type="submit" />
7

Các nút được sử dụng để gửi biểu mẫu. Nếu bạn muốn tạo một nút tùy chỉnh và sau đó tùy chỉnh hành vi bằng JavaScript, bạn cần sử dụng phần tử submit0 hoặc tốt hơn nữa là phần tử

<input type="submit" />
7

Nếu bạn chọn sử dụng các phần tử

<input type="submit" />
7 để tạo các nút trong biểu mẫu của mình, hãy ghi nhớ điều này. Nếu
<input type="submit" />
7 nằm trong
<input type="submit" />
4, nút đó sẽ được coi là nút "gửi". Vì vậy, bạn nên có thói quen chỉ định rõ ràng nút nào là nút gửi

Chúng tôi sẽ bắt đầu bằng cách tạo một biểu mẫu với một nút gửi đơn giản

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" />
  div>
form>

Điều này ám chỉ như vậy

Hãy thử nhập một số văn bản vào trường văn bản, sau đó gửi biểu mẫu

Khi gửi, cặp tên/giá trị dữ liệu sẽ được gửi đến máy chủ. Trong trường hợp này, chuỗi sẽ là submit5, trong đó "văn bản người dùng" là văn bản do người dùng nhập, được mã hóa để giữ nguyên các ký tự đặc biệt. Dữ liệu được gửi ở đâu và như thế nào tùy thuộc vào cấu hình của

<input type="submit" />
4;

Phím tắt, còn được gọi là phím truy cập và tương đương với bàn phím, cho phép người dùng kích hoạt một nút bằng một phím hoặc tổ hợp phím trên bàn phím. Để thêm lối tắt bàn phím vào nút gửi — giống như bạn làm với bất kỳ nào hợp lý — bạn sử dụng thuộc tính toàn cầu submit8

Trong ví dụ này, s được chỉ định làm phím truy cập (bạn sẽ cần nhấn s cộng với các phím bổ trợ cụ thể cho tổ hợp trình duyệt/hệ điều hành của mình). Để tránh xung đột với các phím tắt riêng của tác nhân người dùng, các phím bổ trợ khác nhau được sử dụng cho các phím truy cập so với các phím tắt khác trên máy tính chủ. Xem submit8 để biết thêm chi tiết

Đây là ví dụ trước có thêm khóa truy cập s

<form>
  <div>
    <label for="example">Let's submit some textlabel>
    <input id="example" type="text" name="text" />
  div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  div>
form>

Ví dụ: trong Firefox dành cho Mac, nhấn Control-Option-S sẽ kích hoạt nút Gửi, trong khi Chrome trên Windows sử dụng Alt+S

Vấn đề với ví dụ trên là người dùng sẽ không biết khóa truy cập là gì. Điều này đặc biệt đúng vì các công cụ sửa đổi thường không theo tiêu chuẩn để tránh xung đột. Khi xây dựng trang web, hãy đảm bảo cung cấp thông tin này theo cách không ảnh hưởng đến thiết kế trang web (ví dụ: bằng cách cung cấp liên kết dễ truy cập trỏ đến thông tin về khóa truy cập trang web là gì). Việc thêm chú giải công cụ vào nút (sử dụng thuộc tính click0) cũng có thể hữu ích, mặc dù đó không phải là giải pháp hoàn chỉnh cho mục đích trợ năng

Để tắt nút gửi, hãy chỉ định thuộc tính click1 trên nút đó, như vậy

<input type="submit" value="Send" disabled />

Bạn có thể bật và tắt các nút trong thời gian chạy bằng cách đặt click1 thành click3 hoặc click4;

Ghi chú. Xem trang để biết thêm ý tưởng về cách bật và tắt các nút

Các nút gửi không tham gia xác thực ràng buộc;

Chúng tôi đã bao gồm các ví dụ đơn giản ở trên. Thực sự không còn gì để nói về các nút gửi. Có một lý do mà loại điều khiển này đôi khi được gọi là "nút đơn giản. "

Làm cách nào để hiển thị một thông báo trong JavaScript?

Một hàm hữu ích có sẵn trong JavaScript là hàm alert() . Chức năng này sẽ hiển thị văn bản trong hộp thoại bật lên trên màn hình. Trước khi chức năng này có thể hoạt động, trước tiên chúng ta phải gọi hàm showAlert(). Các hàm JavaScript được gọi để phản hồi các sự kiện.

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

Để gửi biểu mẫu bằng JavaScript, trước tiên bạn phải tạo biểu mẫu và thêm các thuộc tính riêng biệt, cụ thể vào các trường nhập . Bạn sẽ sử dụng các thuộc tính này để truy xuất dữ liệu khi người dùng gửi và sau đó gọi một hàm để xử lý xác thực (có thể nếu có bất kỳ dữ liệu nào được gửi).

Làm cách nào để hiển thị dữ liệu biểu mẫu sau khi gửi?

Thuộc tính formtarget chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu . Thuộc tính formtarget ghi đè thuộc tính target của phần tử

Làm cách nào để nhận được thông báo thành công trong cùng một trang sau khi gửi biểu mẫu liên hệ?

Nếu bạn muốn cùng một trang biểu mẫu được hiển thị lại sau khi gửi kết quả, bạn sẽ thực hiện tác vụ trên cùng một trang và bao gồm tập lệnh xử lý ở đầu tệp. Instead of echoing the result message within the processor as you have, store it as a variable which can be output in the html form page.