contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Mengambil Nilai dari Pop Up dengan Javascript

Posted in Javascript Jquery Life at 26 Juli 2018 With 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.

mengambil data dari pop up ke textbox dengan javascript

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>

mengambil nilai dari pop up ke textbox

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>

Artikel Rekomendasi



Artikel Terkait

Diskusi