Membuat Confirm Dialog Dengan Javascript

Postingan kali ini tentang Javascript lagi. Kali ini saya ingin share tentang penggunaan confirm dialog box.
Anda pasti sudah pernah menemui dialog box seperti ini :


Dialog box tersebut dinamakan dengan confirm dialog. Kegunaanya tentu saja untuk meyakinkan user terhadap action yang akan dilakukannya. Jika yang dipilih OK maka action akan berjalan namun jika yang di pilih cancel maka action tidak akan berjalan.

Contohnya begini, coba anda klik link dibawah ini:



CONTOH CONFIRM DIALOG

apa yang terjadi? Jika memilih option OK maka akan muncul windows baru menuju halaman yang lain di blog ini. Namun jika anda memilih cancel maka tidak akan ada action yang dieksekusi.

Langsung saja, syntax dari confirm dialog ini cukup pendek yaitu :

confirm("pesan anda disini");

untuk contoh yang diatas saya letakan pada link, sehingga jadinya seperti ini :

<a href="http://blajar-komputer.blogspot.com" target="_blank" onclick='return confirm("yakin nih?");'>Link</a>

atau anda juga bisa menempatkannya pada tag <body>, semisal jika user ingin menutup browsernya. Jika disisipi confirm dialog ini maka sebelum browser tertutup akan muncul confirm dialog. Anda cukup menyisipkan atribut onunload pada tag <body> Berikut adalah contohnya :

<body onunload='return confirm(“yakin akan meninggalkan halaman ini?”);'>

Sebenarnya confirm dialog ini kegunaannya sangat banyak. Yang jelas confirm dialog ini akan sangat berguna untuk mengatasi kecerobohan user. Misalnya saja ada link untuk menghapus suatu data. Jika link tersebut tidak diberi konfirmasi, saat link tersebut diklik maka data akan langsung terhapus, jika user yang mengeklik link tersebut tidak sengaja maka data juga akan langsung terhapus. Dan ini akan merepotkan jika data yang terhapus merupakan data yang penting. Untuk itu gunakanlah confirm dialog ini untuk mengatasi kecerobohan user.
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Leave a comment