Hàm confirm() js - Xác nhận xóa trong website

Bạn đang làm website bán hàng, bạn cần xác nhận trước khi xóa một phần tử trong website? Hàm confirm js là một giải pháp hiệu quả sinh ra để thực hiện chức năng trên.

Tạo sao cần xác nhận xóa trong website?

Nếu bạn đang xây dựng backend website, chắc hẵn bạn xây dựng nhiều chức năng nhập liệu các module khác nhau như bài viết(posts), sản phẩm(products), đơn hàng(sales)…

Ở mỗi module này có tác vụ xóa(delete) để loại bỏ một bản ghi ra khỏi hệ thống.

Thao tác xóa là một tác vụ quan trọng và có thể ảnh hưởng xấu đến hoạt động của hệ thống.

Sẽ rất tai hại nếu bạn lỡ tay xóa đi một nội dung đã bỏ công sức, thời gian viết và hoàn thiện trong vài ngày với hàng ngàn từ?

Vậy nên một yêu cầu bắt buộc đối với người xây dựng ứng dụng cần tạo ra một hộp thoại thông báo để người dùng đọc và xác nhận trước khi hành động hành động xóa hoặc một tác vụ quan trọng khác.

Chính vì vậy Confirm js đã ra đời…

Confirm() js là gì và cách sử dụng

Phương thức confirm() trong JavaScript được sử dụng để hiển thị một hộp thoại xác nhận (confirmation dialog) trên trình duyệt web của người dùng. Hộp thoại này thường sử dụng để xác nhận một hành động quan trọng hoặc để đảm bảo người dùng có chắc chắn muốn thực hiện một hành động cụ thể. Dưới đây là cách nó hoạt động:

Khi JavaScript gọi phương thức confirm(), nó hiển thị một hộp thoại xác nhận trên trình duyệt web của người dùng.
Hộp thoại này chứa hai nút: “OK” và “Hủy bỏ” (hoặc tùy theo ngôn ngữ trình duyệt, có thể là “OK” và “Cancel”). Người dùng có thể nhấn vào một trong các nút này.
Nếu người dùng nhấn vào nút “OK”, phương thức confirm() trả về giá trị true. Điều này thường được sử dụng để xác nhận rằng người dùng đã đồng ý với một điều gì đó và bạn có thể tiếp tục thực hiện hành động tương ứng.
Nếu người dùng nhấn vào nút “Hủy bỏ”, phương thức confirm() trả về giá trị false. Điều này thường được sử dụng để xác nhận rằng người dùng đã từ chối một hành động và bạn có thể ngăn cản việc thực hiện nó.

Ví dụ thực tế confirm() js

var confirmation = confirm("Are you sure you want to delete your account?");

if (confirmation === true) {
    // Perform the account deletion
    alert("Your account has been deleted!");
} else {
    // Cancel the account deletion
    alert("Account deletion canceled.");
}

Đoạn mã JavaScript trên là một ví dụ về cách sử dụng phương thức confirm() để xác nhận một hành động từ người dùng và sau đó thực hiện một hành động cơ bản dựa trên phản hồi của họ. Dưới đây là giải thích từng dòng:

var confirmation = confirm("Are you sure you want to delete your account?");: Trong dòng này, chúng ta sử dụng confirm() để hiển thị một hộp thoại xác nhận cho người dùng. Văn bản “Are you sure you want to delete your account?” là nội dung trong hộp thoại xác nhận. Hộp thoại này sẽ có hai nút là “OK” và “Cancel”. Giá trị trả về từ confirm() sẽ được lưu vào biến confirmation.
if (confirmation === true) {: Dòng này kiểm tra xem giá trị trả về từ confirm() có bằng true hay không. Nếu người dùng đã nhấn “OK” trong hộp thoại xác nhận, thì biến confirmation sẽ được đặt thành true, và chương trình sẽ tiếp tục vào khối mã trong ngoặc nhọn {} sau dòng này.
alert("Your account has been deleted!");: Trong khối mã này, chúng ta sử dụng alert() để hiển thị một thông báo cho người dùng. Nếu họ đã xác nhận việc xóa tài khoản, thông báo này sẽ thông báo rằng “Your account has been deleted!”.
} else {: Nếu giá trị trả về từ confirm() không bằng true, tức là người dùng đã nhấn “Cancel” trong hộp thoại xác nhận, chương trình sẽ thực hiện mã trong ngoặc nhọn sau dòng này.
alert("Account deletion canceled.");: Trong khối mã này, chúng ta sử dụng alert() để hiển thị một thông báo khác cho người dùng. Nếu họ đã hủy bỏ việc xóa tài khoản, thông báo này sẽ thông báo rằng “Account deletion canceled.”.

Tóm lại, đoạn mã này cho phép người dùng xác nhận việc xóa tài khoản và hiển thị thông báo tương ứng sau khi họ đã lựa chọn trong hộp thoại xác nhận.

Sử dụng confirm xóa phần tử trong php

Trường hợp bạn có một link xóa phần tử trên website bạn có thể sử dụng theo cấu trúc bên dưới để kích hoạt hoặc tạm dùng việc xóa khi dùng confirm().

<a href="link-to-delete.php" onclick="return confirm('Are you sure you want to delete?')">Xóa</a>

Trong đoạn mã trên:

href của thẻ <a> chứa URL mục tiêu khi người dùng nhấn vào liên kết. Trong trường hợp này, nó là "link-to-delete.php" hoặc đường dẫn đến trang xóa.
Trong sự kiện onclick, chúng ta sử dụng confirm('Are you sure you want to delete?'). Hộp thoại xác nhận sẽ hiển thị khi người dùng nhấn vào liên kết, và nếu họ nhấn “OK,” thì liên kết sẽ thực hiện chuyển hướng đến URL đã được định nghĩa trong href. Nếu họ nhấn “Cancel,” thì không có thay đổi và không có chuyển hướng xảy ra.

Nhớ rằng việc xử lý xóa (trong trường hợp này là link-to-delete.php) sẽ phụ thuộc vào ứng dụng web cụ thể của bạn và cách bạn đã xây dựng nó để xóa dữ liệu.

Tổng kết

Bài viết này tôi chia sẻ đến bạn cách để xác nhận xóa hoặc thực hiện một hành động quan trọng, nguy hiểm trong hệ thống với confirm.

Công cụ này sẽ góp phần làm cho hệ thống của bạn trở nên an toàn hơn với người dùng và đạt hiệu quả cao trong quá trình vận hành sử dụng.

Những tư duy này được tôi chia sẻ nhiều trong khóa học lập trình web đi làm tại unitop.vn. Nếu bạn đang ở trong tình trạng tự học không hiệu quả có thể xem để rút ngắn thời gian và đi làm sớm.

Phan Văn Cương và cộng sự

P/s: Nếu bạn gặp khó khăn hãy inbox cho tôi để được tư vấn!

Trước khi chúng ta gặp lại nhau, bạn có thể bấm vào đây để tải và đọc cuốn ebook chia sẻ về hành trình vượt qua khó khăn từng bước trở thành một web developer và giờ đây là người dẫn dắt đồng hành giúp hàng ngàn người có công việc thu nhập từ 8-50tr/tháng.

✌️ Tải ebook tại đây!

Hẹn gặp lại!