Mengambil Nilai dari Pop Up dengan Javascript

Publish Date : 26-07-2018 , dibaca 10717 kali, Hari ini dibaca : 1 kali ,0 comments

Pagi sahabat semua...Tutorial ini kita akan membahas Cara Passing Value dari Parent Window dengan menggunakan javascript. Bingung saya mau menuliskan judul yang paling mudah dimengerti... OK.. saya ceritakan saja maksud dari judul diatas ya..

Jadi ceritanya.. kita ingin mengambil Nilai atau data Value dari Pop Up window dengan menggunakan Javascript. Nah kalo dalam bahasa asing nya pass selected value from popup window to parent window input box .. kira-kira seperti itu deh

Biasanya ini terjadi pada project pencarian data.. dimana ada tombol serch.. saat kita klik akan muncul window baru, kemudian ada data dari database yang dapat kita pilih datanya.. dan saat kita pilih.. otomatis akan terisi ke textbox.

Index.html

 <html>
<head>
<title>Mengambil Nilai From Pop Up dengan Javascript| Suckittrees.com</title>
</head>
<body>
<b>Tutorial Suckittrees.com</b>
<form method='post' action='' name='frmParent'>
Harga : <input type=text name='txtharga' id='harga' size='20'>
<a href="javascript:void(0);" NAME="My Window Name" title=" My title here "
onClick='javascript:window.open("pop_up.html","Ratting",
"width=550,height=170,left=150,top=200,toolbar=1,status=1,");'> Cari</a>
</form>

</body>
</html>

kemudian kita buat halaman pop_up.html , dimana ini merupakan file HTML tempat data yang akan kita cari

pop_up.html

<html>
<head>
<script langauge="javascript">
function post_value(s){
opener.document.getElementById('harga').value = s;
self.close();
}
</script>
<title>Halaman Popup (Child)</title>
</head>
<body>
<table border='1'>
<tr>
    <td>No</td>
    <td>Harga</td>
    <td>Aksi</td>
</tr>
<tr>
    <td>1</td>
    <td>200</td>
    <td><a href='#' onclick="post_value('200');">Pilih</a></td>
</tr>
<tr>
    <td>1</td>
    <td>300</td>
    <td><a href='#' onclick="post_value('300');">Pilih</a></td>
</tr>
</form>
</body>
</html>

Silahkan anda jalankan , Saat kita mengklik cari, akan muncul pop up window , dan kita bisa memilih data , dan memasukkan ke textbox , dengan script seperti ini kita dapat mengkolaborasikan dengan menggunakan database . Data dari Database Mysql bisa di tampilkan dengan PHP pada form pop_up.php, kemudian dari data tersebut kita bisa memasukkan data ke textbox pada aplikasi yang kita buat. Semoga dapat bermanfaat

Demo Download

Mulltiple Values

Mengambil beberapa data atau lebih dari satu dari popup ke text box.. begini scriptnya.. Yang pertama tentu textbox nya ada 2 , ini pada index.html

<input type=text name='txtharga' id='harga' size='20'>
<input type=text name='txtsubtotal' id='subtotal' >

Yang ingin kita ambil ada 2 yaitu id='harga' dan id='subtotal' , Tentu pada pop_up.html juga kita tambah menjadi

<a href='#' onclick="post_value('200','300');">Pilih</a>

Kemudian pada function javascriptnya menjadi

<script langauge="javascript">
function post_value(s,x){
opener.document.getElementById('harga').value = s;
opener.document.getElementById('subtotal').value = x;
self.close();
}
</script>

Membuat Konfirmasi Password
Previous Post

Export Document HTML to Word with Javascript
Next Post