Hiển thị thông báo (success/error) sau khi submit form

BởiChu Minh Nam5 phút đọc260 lượt xem

Chia sẻ

Khi xây dựng website với PHP, một trong những tính năng quan trọng là hiển thị thông báo thành công (success) hoặc thất bại (error) sau khi người dùng submit form. Điều này giúp nâng cao trải nghiệm, cung cấp phản hồi rõ ràng và trực quan. Ví dụ, sau khi đăng nhập, thêm dữ liệu vào cơ sở dữ liệu hoặc gửi liên hệ, người dùng luôn muốn biết thao tác của họ có thành công hay không.

Trong quá trình xử lý form, ngoài việc validate dữ liệu và lưu trữ vào MySQL, bạn cần cơ chế hiển thị thông báo hợp lý. Trước đó, bạn đã biết cách kết nối MySQL bằng PDO trong PHP và làm CRUD PHP thuần. Giờ đây, việc kết hợp hiển thị thông báo sẽ giúp quy trình xử lý dữ liệu trở nên hoàn chỉnh và chuyên nghiệp hơn.

Tạo form HTML cơ bản

Đầu tiên, bạn cần một form HTML để người dùng nhập dữ liệu. Ở đây, ta sẽ tạo một form đăng ký đơn giản với trường username và email.

Việc thiết kế form cơ bản giúp định nghĩa các input cần thiết. Bạn nên bổ sung required để browser kiểm tra sơ bộ trước khi gửi dữ liệu. Sau khi submit, form sẽ được xử lý bằng PHP để hiển thị thông báo thích hợp.

<form action="process.php" method="post">
  <label for="username">Tên đăng nhập:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Đăng ký</button>
</form>

Xử lý form bằng PHP và tạo thông báo

Khi người dùng nhấn nút submit, dữ liệu sẽ được gửi đến file process.php. Tại đây, bạn kiểm tra dữ liệu hợp lệ hay không, sau đó đặt thông báo success hoặc error vào session để hiển thị ở trang chính.

Sử dụng session là cách phổ biến vì nó giữ trạng thái trong một request tiếp theo, giúp bạn redirect về form và vẫn hiển thị thông báo.

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username']);
    $email = trim($_POST['email']);
    
    if ($username !== '' && filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Giả sử lưu dữ liệu thành công
        $_SESSION['success'] = "Đăng ký thành công cho người dùng: $username";
    } else {
        $_SESSION['error'] = "Thông tin nhập không hợp lệ. Vui lòng thử lại.";
    }
    
    header("Location: index.php");
    exit;
}

Hiển thị thông báo ra giao diện

Trong file index.php, bạn chỉ cần đọc session và hiển thị ra màn hình. Sau đó, xóa session để tránh thông báo hiển thị lại khi refresh.

Có thể dùng CSS để làm nổi bật màu xanh cho thành công và đỏ cho thất bại.

<?php session_start(); ?>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Hiển thị thông báo form</title>
<style>
.success { color: green; padding: 10px; border: 1px solid green; }
.error { color: red; padding: 10px; border: 1px solid red; }
</style>
</head>
<body>

<?php if (isset($_SESSION['success'])): ?>
    <div class="success"><?php echo $_SESSION['success']; ?></div>
    <?php unset($_SESSION['success']); ?>
<?php endif; ?>

<?php if (isset($_SESSION['error'])): ?>
    <div class="error"><?php echo $_SESSION['error']; ?></div>
    <?php unset($_SESSION['error']); ?>
<?php endif; ?>

<!-- Form -->
<form action="process.php" method="post">
  <label for="username">Tên đăng nhập:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Đăng ký</button>
</form>

</body>
</html>

Nâng cao: Thông báo bằng JavaScript (AJAX)

Ngoài cách truyền thống qua session, bạn có thể dùng AJAX để xử lý form và hiển thị thông báo ngay mà không cần reload trang. Cách này thường dùng trong các ứng dụng hiện đại.

Ví dụ sử dụng jQuery để gửi dữ liệu:

<form id="ajaxForm">
  <input type="text" name="username" placeholder="Tên đăng nhập" required>
  <input type="email" name="email" placeholder="Email" required>
  <button type="submit">Đăng ký</button>
</form>

<div id="message"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#ajaxForm").on("submit", function(e) {
  e.preventDefault();
  $.post("process_ajax.php", $(this).serialize(), function(data) {
    $("#message").html(data);
  });
});
</script>

Trong process_ajax.php, trả về HTML chứa thông báo:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username']);
    $email = trim($_POST['email']);

    if ($username !== '' && filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "<div class='success'>Đăng ký thành công cho $username</div>";
    } else {
        echo "<div class='error'>Thông tin nhập không hợp lệ</div>";
    }
}

Kết luận

Hiển thị thông báo success/error sau khi submit form là bước quan trọng giúp ứng dụng PHP trở nên thân thiện và chuyên nghiệp. Bạn có thể thực hiện bằng cách lưu thông báo trong session, redirect rồi hiển thị, hoặc xử lý trực tiếp bằng AJAX để có trải nghiệm mượt hơn. Kết hợp với các kiến thức về PDO, CRUD, session bạn sẽ có một hệ thống quản trị dữ liệu đầy đủ, rõ ràng và dễ dùng.