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


Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

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

Post by bankjittapol » 12/11/2019 7:12 pm

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

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

Code: Select all

    <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>

 

Code: Select all

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

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

อ้างอิง
https://www.w3schools.com/jsref/met_win_confirm.asp
https://craftpip.github.io/jquery-confirm/

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests