การใช้ confirm() ของ Javascript เพื่อ แจ้งเตือน ให้กดยืนยัน ก่อนทำการ ลบข้อมูล

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
bankjittapol
PHP Super Member
PHP Super Member
โพสต์: 344
ลงทะเบียนเมื่อ: 21/10/2019 10:19 am

การใช้ confirm() ของ Javascript เพื่อ แจ้งเตือน ให้กดยืนยัน ก่อนทำการ ลบข้อมูล

โพสต์ที่ยังไม่ได้อ่าน โดย bankjittapol »

method confirm() เป็น method ของ Jquery เพื่อแจ้งเตือนว่า คุณยืนยันจะทำเหตุการณ์นั้นๆ จริงไช่ไหม และสามารถใช้ jConfirmAction ที่เป็นส่วนของ javascript ก็สามารถทำงานได้เช่นกัน

ตัวอย่างการใช้งาน

โค้ด: เลือกทั้งหมด

    <ul class="list-group mb-3">
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <button type="button" class="btn btn-danger" name="button">delete</button>
                            <div>
                                <h6 class="my-0">Product name</h6>
                                <small class="text-muted">Brief description</small>
                            </div>
                            <span class="text-muted">$12</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <button type="button" class="btn btn-danger" name="button">delete</button>

                            <div>
                                <h6 class="my-0">Second product</h6>
                                <small class="text-muted">Brief description</small>
                            </div>
                            <span class="text-muted">$8</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <button type="button" class="btn btn-danger" name="button">delete</button>

                            <div>
                                <h6 class="my-0">Third item</h6>
                                <small class="text-muted">Brief description</small>
                            </div>
                            <span class="text-muted">$5</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between bg-light">
                            <button type="button" class="btn btn-danger" name="button">delete</button>

                            <div class="text-success">
                                <h6 class="my-0">Promo code</h6>
                                <small>EXAMPLECODE</small>
                            </div>
                            <span class="text-success">-$5</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Total (USD)</span>
                            <strong>$20</strong>
                        </li>
                    </ul>

 

โค้ด: เลือกทั้งหมด

	<script type="text/javascript">
		$('.list-group-item .btn').click(function(){
					if (confirm('แน่ใจ? ')) {
							$(this).parent().remove();
							$('.badge-pill').html($('.lh-condensed').length);
					}
			});
</script>
จะได้
รูปภาพ

เมื่อกด ปุ่ม delete จะแจ้งเตือนเพื่อยืนยันว่า จะทำการลบหรือไม่ ?
รูปภาพ

อ้างอิง
https://www.w3schools.com/jsref/met_win_confirm.asp
https://craftpip.github.io/jquery-confirm/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 28