Saturday, May 7, 2011

MEMBUAT INPUT DIALOG BOX DENGAN JAVASCRIPT

Kalau sebelumnya saya menulis tentang penggunaan alert dan juga confirm dialog dengan javascript, kali ini saya ingin sharing tentang penggunaan Input dialog.

Anda pasti sudah sering menjumpai input dialog bukan? Maksudnya yang seperti ini:

atau bisa juga dicoba dengan mengklik link di bawah ini:


CONTOH INPUT DIALOG

Input dialog box ini mempunyai banyak kegunaan. Yang jelas dengan input dialog box ini seorang user dapat berinteraksi dengan suatu web. Selain itu dengan input dialog ini, suatu website dapat dibuat lebih dinamis, dengan inputan yang berbeda maka outputnya pun dapat dibuat berbeda. Untuk contoh gambar yang diatas misalnya saja kita masukan angka 1 maka keluarannya adalah halaman home, jika diinputkan 2 maka keluarannya adalah html, dan seterusnya. Input dialog box ini dapat dibuat menggunakan javascript. Untuk aturan penulisannya adalah sebagai berikut:

prompt(text_label, text_value);

text_label merupakan text yang akan ditampilkan pada input dialog, untuk contoh diatas yaitu tulisan “masukan pilihan anda dst”. Sedangkan text_value merupakan text yang ada pada field inputan, text_value ini sifatnya optional, jadi meskipun kosong tidak akan menjadi masalah. Untuk contoh penulisan di atas belum memasukan nilai yang diinputkan ke dalam suatu variabel. Untuk memasukan inputan tadi ke dalam variabel contohnya seperti ini :

var a = prompt(text_label, text_value);

var merupakan syntax pada javascript untuk mendeklarasikan suatu variabel. Sendankan a merupakan nama variabel yang dideklarasikan.
Berikut saya berikan contohnya :

CONTOH INPUT DIALOG

Untuk contoh input dialog tersebut sourcenya adalah sebagai berikut :

<html>
<head>
<title>Prompt</title>
</head>
<body>
<script language="javascript">
function pilih()
{
var pil=prompt("masukan pilihan anda:\n1.Home\n2.HTML\n3.JavaScript");
if (pil!=null){
if (pil==1){
window.open("http://adegitaris.blogspot.co.id/");
}else if (pil==2){
window.open("http://adegitaris.blogspot.co.id/");
}else if (pil==3){
window.open("http://adegitaris.blogspot.co.id/");
}else{
alert("pilihan yang dimasukan tidak terdaftar");
}
}
}
</script>
<a onClick="pilih();" href="#">Klik Disini</a>
</body>
</html>

atau anda juga bisa mendownload beberapa contoh lainnya pada link di bawah ini :

DOWNLOAD