Pada kesempatan kali ini saya akan membahas mengenai topik untuk mengambil nilai dari popup windows dengan javascript. Kegiatan ini saya lakukan karena pada praktiknya seringkali kita harus melakukan kegiatan untuk mengambil data dari popup windows dengan menggunakan javascript. Saya bukan seorang ahli dalam javascript, jadi jika dalam source code yang saya sertakan dirasa ada yang kurang baik mohon saran dan perbaikannya. Untuk memulai langkah-langkah pada kegiatan ini adalah sebagai berikut:
1. Membuat Source Code Pemanggil
Langkah ini dilakukan untuk memanggil popup windows dan akan menerima inputan yang berasal dari popup windows. Kegiatan ini diawali dengan cara membuka popup windows dengan menekan tombol Search.
main.html
<html>
<head>
<title>Pemanggil</title>
<script type='text/javascript'>
function popupForm(){
var popup= window.open('popup.html','popupForm','menubar=no,status=no,top=100%,left=100;');
}
</script>
</head>
<body>
<form name='mainForm' id='mainForm' >
<input type='text' id='txtMain' name='txtMain' readonly/>
<input type='button' value='Search' onclick='popupForm()' />
</form>
</body>
</html>
Popup windows akan dibuka dengan perintah window.open. Adapun spesifikasi lengkap dari method window.open ini dapat dilihat pada halaman w3school berikut.
2. Membuat Source Code Popup Window
Pada langkah ini kita akan membuat source code popup windows dimana user akan memasukkan input pada windows ini dan setelah menekan tombol OK maka textbox pada halaman pemanggil (main.html) akan diisi oleh hasil inputan dari windows ini.
popup.html
<html>
<head>
<title>Popup</title>
<script type='text/javascript'>
function validepopupform(){
window.opener.document.mainForm.txtMain.value=document.popupForm.txtPopup.value;
self.close();
}
</script>
</head>
<body>
<form id='popupForm' name='popupForm' >
<input type='text' id='txtPopup' name='txtPopup' />
<input type='button' value='OK' onclick='validepopupform()' />
</form>
</body>
</html>
Dari source code diatas terdapat property window.opener dimana spesifikasi dari perintah ini bisa dilihat pada halaman window opener property w3schools. Dan source code yang saya tulis diatas berasal dari kode sumber get back the values to main window from popup window berikut dengan sedikit perubahan.
