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

Bất cứ khi nào người dùng thêm một số dữ liệu không hợp lệ vào biểu mẫu và gửi nó, trang sẽ phải làm mới để hiển thị lỗi, trong trường hợp bạn không sử dụng JavaScript hoặc thứ gì đó tương tự

Tin xấu là dữ liệu đầu vào sẽ biến mất, điều này có thể rất khó chịu, đặc biệt nếu biểu mẫu có nhiều trường

May mắn thay, có hai phương pháp đơn giản mà bạn có thể sử dụng

Điều này chỉ hoạt động khi gửi, thành công hoặc không thành công (nếu kích hoạt lỗi xác thực). Nó không hoạt động khi làm mới trang đơn giản (F5) nếu dữ liệu chưa được gửi trước. Bạn sẽ cần một số JavaScript cho điều đó

1. Giữ dữ liệu biểu mẫu được làm mới bằng toán tử ternary PHP

Toán tử bậc ba là phiên bản ngắn hơn và thiết thực hơn của câu lệnh if/else tiêu chuẩn

Nó được sử dụng như thế này

php $a ? $b : $c;

Điều này chuyển thành một cái gì đó như thế này

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

Vì vậy, để sử dụng điều này trong một biểu mẫu để ghi nhớ dữ liệu sau khi người dùng nhấn gửi và trang được làm mới, bạn sẽ phải thêm điều này vào thuộc tính

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

1 của đầu vào

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

Bạn nên bọc đầu ra trong htmlspecialchars() để bảo mật

Vì vậy, thẻ HTML đầu vào sẽ trông như thế này

<input name="name" type="text" value="">

Điều này làm là hiển thị dữ liệu trong trường

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

2 nếu nó được đặt (do người dùng thêm). Nếu không, hãy để trống

2. Giữ cho dữ liệu biểu mẫu được làm mới bằng toán tử kết hợp Null PHP

Trong PHP 7, toán tử kết hợp null đã được giới thiệu, tương đương với toán tử ternary, nhưng ngắn hơn

Cái này

php echo $_POST['name'] ?? ''; ?>

tương đương với cái này

php echo isset($_POST['name']) ? $_POST['name'] : ''; ?>

Vì vậy, để giữ cho dữ liệu đầu vào được gửi và làm mới, hãy sử dụng nó trong thuộc tính

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

1, như thế này

<input type="text" name="name" value="">

Nhưng, một lần nữa, bạn nên sử dụng

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

4 để bảo mật

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

1

Lưu ý rằng bạn phải thêm toán tử bên trong hàm

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

4. Nếu không, bạn sẽ gặp lỗi "Chỉ mục không xác định"

Không phải lúc nào bạn cũng có thể tận dụng thuộc tính giá trị HTML

Có những trường hợp bạn không thể sử dụng thuộc tính

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

1 để thêm toán tử bậc ba hoặc toán tử kết hợp. Vì vậy, bạn cần sáng tạo hơn

Hãy lấy thẻ HTML

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

7 làm ví dụ, trong đó bạn sẽ phải sử dụng các giá trị cho

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

8

Để giữ cho dữ liệu luôn được làm mới trong thẻ

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

7 bằng PHP, bạn có thể sử dụng thuộc tính HTML

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

0, thuộc tính này làm cho một

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

1 được chọn theo mặc định

Vì vậy, bạn sẽ phải thêm nội dung như thế này vào thẻ

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

1

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

0

Nếu

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

7 có một giá trị, và nếu nó bằng giá trị của

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

1, thì hãy lặp lại

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

0, nếu không, đừng lặp lại bất cứ điều gì

Đây là toàn bộ phần

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

4

Cẩn thận với

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

6

Không giống như đầu vào,

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

6 có thẻ kết thúc.

php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

8

Vì vậy, bạn cần đặt toán tử PHP giữa các thẻ, không phải bên trong

php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

0

Tôi đã phạm sai lầm này, tất nhiên. 😃

Điều này sẽ không hoạt động đối với đầu vào tệp

Các phương pháp trên sẽ không hoạt động đối với đầu vào Tệp vì lý do bảo mật

Và tôi không biết về bất kỳ cách giải quyết nào khác với PHP. Có lẽ với một số Javascript

Vì vậy, người dùng sẽ phải tải tệp lên lại nếu trang làm mới nhưng biểu mẫu không được gửi thành công

Đó là một bọc

Tôi hy vọng bạn tìm thấy bài viết hữu ích và toàn diện

Nếu một số thông tin đã lỗi thời hoặc không chính xác hoặc bạn có bất cứ điều gì cần thêm, nói hoặc hỏi, vui lòng liên hệ với tôi qua Twitter hoặc email

Giới thiệu về Radu

Tôi đã làm việc trực tuyến tại nhà được hơn 9 năm. Tôi đã học được rất nhiều thứ khác nhau liên quan đến các trang web. Chuyên môn chính của tôi là WordPress, nhưng trong một thời gian, tôi bắt đầu tập trung nhiều hơn vào phát triển web

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

Làm cách nào để giữ lại các giá trị trong hộp văn bản sau khi gửi JavaScript?

Làm cách nào để xóa dữ liệu biểu mẫu sau khi gửi bằng JavaScript?

Làm cách nào để lưu trữ dữ liệu sau khi nhấp vào nút gửi trong HTML?