sweetalert2 yes no สร้าง alert พร้อมปุ่ม ตกลง ยกเลิก

sweetalert2 yes no สร้าง alert พร้อมปุ่ม ตกลง ยกเลิก บทความนี้สอนสร้าง alert หรือ Message Box ด้วย sweetalert2 พร้อมปุ่ม yes (ตกลง) และ no (ยกเลิก) พร้อมแสดงผลที่หน้าเว็บไซต์ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง sweetalert2 yes no สร้าง alert พร้อมปุ่ม ตกลง ยกเลิก

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    Swal.fire({
        title: 'ยืนยันการลบข้อมูล ??',
        showDenyButton: true,
        confirmButtonText: 'Yes',
        denyButtonText: 'No',
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire('ลบข้อมูลแล้ว', '', 'success');
        } else if (result.isDenied) {
            Swal.fire('ยกเลิกลบข้อมูล', '', 'info');
        }
    });
</script>

sweetalert2 yes no สร้าง alert พร้อมปุ่ม ตกลง ยกเลิก เริ่มต้นด้วยการติดตั้ง sweetalert2 plugin ผ่าน CDN จากนั้นใช้คำสั่ง Swal.fire เพื่อสร้าง alert โดยมีรายละเอียดดังนี้

1. title คือ ข้อความส่วนหัวของ Alert หรือ Message Box

2. showDenyButton คือ แสดงปุ่มสำหรับ No หรือยกเลิก

3. confirmButtonText คือ กำหนดข้อความที่ปุ่มตกลง ค่าเริ่มต้นคือ Yes

4. denyButtonText คือ กำหนดข้อความที่ปุ่มยกเลิก ค่าเริ่มต้นคือ No

5. เมื่อมีการคลิกปุ่ม เรียกใช้คำสั่ง then((result) และเข้าไปทำงานในฟังก์ชันภายในต่อ

6. กรณีกดปุ่ม Yes จะทำงานใน if (result.isConfirmed)

7. กรณีกดปุ่ม No จะทำงานใน else if (result.isDenied)