Selasa, 15 Januari 2013

Memanggil Window Popup di Web dan Memilih Data kemudian Mengembalikan ke Opener, Parent Window dengan Javascript

Kali ini kembali ke Javascript Basic lagi. Ketika penulis membuat web selalu ada saja kebutuhan untuk membuka popup window kemudian memilih data dan mengembalikan data ke opener (parent) window.

Yang lebih sulit lagi data yang dipilih harus banyak, atau dalam bentuk check box, seperti gambar di samping.

Caranya buat pemanggil window popup di halaman utama sebagai berikut :

window-popup-pilih-kembalikan-data-call-akses-parent-opener.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<!--
http://cariprogram.blogspot.com
nuramijaya@gmail.com
-->
<body>
<input type="text" name="input1" id="input1" />
<input type="submit" name="button" id="button" value="Popup" onclick="window.open('popup-pilih-checkbox-multiple-data.php', 'winpopup', 'toolbar=no,statusbar=no,menubar=no,resizable=yes,scrollbars=yes,width=300,height=400');" />
<br />
<input type="text" name="input2" id="input2" />
<br />
<label>
<input type="button" name="button2" id="button2" value="Ok" style="visibility:hidden;"  />
</label>
</body>
</html>


Kemudian buat halaman popup dengan kode program berikut ini :



popup-pilih-checkbox-multiple-data.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
    // http://cariprogram.blogspot.com
// nuramijaya@gmail.com

var kembali1 = '';
var kembali2 = '';
var i;
function cekpegawai()
{
kembali1='';
kembali2='';
for (i=1;i<=3;i++) //jika ingin dinamis, jumlahnya diganti <?php // echo $jmldata; ?> 
{
if (document.getElementById('cek'+i).checked==true)
{
if (kembali1=='')
{
kembali1='Pegawai'+i;
kembali2=document.getElementById('hidden'+i).value;
}
else
{
kembali1=kembali1+',Pegawai'+i;
kembali2=kembali2+','+document.getElementById('hidden'+i).value;
}
}
}
}
</script>
</head>

<body>
Klik Nama Pegawai Untuk Memilih 1 Pegawai, <br />
Untuk Memilih Banyak Pegawai pilih Checkbox Kemudian Klik OK.<br />
<?php // jika ingin dinamis datanya, query ke database while { ?>
<input type="checkbox" name="cek1" id="cek1" />
<a href="#" onclick="window.opener.document.getElementById('input1').value = 'Pegawai1'; window.opener.document.getElementById('input2').value = document.getElementById('hidden1').value; window.close(); /*window.opener.document.location='refresh.html'*/;">Pegawai1</a>
<input name="hidden1" type="hidden" id="hidden1" value="NIP1" />
<br />
<input type="checkbox" name="cek2" id="cek2" />
<a href="#" onclick="window.opener.document.getElementById('input1').value = 'Pegawai2'; window.opener.document.getElementById('input2').value = document.getElementById('hidden2').value; window.close(); /*window.opener.document.location='refresh.html'*/;">Pegawai2</a>
<input name="hidden2" type="hidden" id="hidden2" value="NIP2" />
<br />
<input type="checkbox" name="cek3" id="cek3" />
<a href="#" onclick="window.opener.document.getElementById('input1').value = 'Pegawai3'; window.opener.document.getElementById('input2').value = document.getElementById('hidden3').value; window.close(); /*window.opener.document.location='refresh.html'*/;">Pegawai3</a>
<input name="hidden3" type="hidden" id="hidden3" value="NIP3" />
<br />
<input type="button" name="button3" id="button3" value="Ok" onclick="cekpegawai(); window.opener.document.getElementById('input1').value = kembali1; window.opener.document.getElementById('input2').value = kembali2; window.opener.document.getElementById('button2').style.visibility='visible'; window.close(); " />
</body>
</html>


Hasilnya :


Seperti biasa, mohon maaf jika penjelasan di atas agak membingungkan, potongan teknik coding seperti ini sering penulis gunakan jadi harus dimasukkan ke blog ini supaya bisa dicari setiap saat penulis membutuhkan.

Kode Program selengkapnya silakan download disini :

https://docs.google.com/file/d/0B4i1FYc_4RXzZFI4QmlMUVBuOFU/edit

Di Google Docs, klik File - Download

Semoga bisa bermanfaat untuk anda juga. Selamat Coding.

15 komentar:

  1. Ada pertanyaan berikut ini di email penulis (nuramijaya@gmail.com) :
    from @AF :
    DH Mas Nur
    Untuk code program dari tutorial :
    javascript-window-popup-return-data-call-parent-opener
    Saya lihat page nya masih statis
    Apakah ada contohnya untuk yang dinamis dan membaca data dari database?
    Terutama data yang ditampilkan pada page child window

    Mohon bantuannya, karena saya sangat membutuhkannya.
    Demikian dari saya dan terima kasih atas ilmunya yang bermanfaat

    Salam

    BalasHapus
    Balasan
    1. to @AF :
      Jika ingin dinamis, misalnya data dari tabel pegawai dengan kolom nip dan nama, maka tinggal dimodifikasi agar diambil dari database, misalnya memakai PHP-MySQL kira-kira seperti ini Mas :

      <script language="javascript">
      // http://cariprogram.blogspot.com
      // nuramijaya@gmail.com

      var kembali1 = '';
      var kembali2 = '';
      var i;
      function cekpegawai()
      {
      kembali1='';
      kembali2='';
      <?php
      mysql_connect("localhost", "root", ""); ?>
      mysql_select_db("nama_database");
      $querypegawai = mysql_query("SELECT * FROM pegawai");
      $i=-1;
      while ($datapegawai = mysql_fetch_array($querypegawai))
      {
      $i++;
      ?>
      //for (i=1;i<=3;i++) //jika ingin dinamis, jumlahnya diganti <?php // echo $jmldata; ?>
      //{
      if (document.getElementById('cek<?php echo $i; ?>').checked==true)
      {
      if (kembali1=='')
      {
      kembali1='<?php echo $datapegawai['nama']; ?>';
      kembali2=document.getElementById('hidden<?php echo $i; ?>').value;
      }
      else
      {
      kembali1=kembali1+',<?php echo $datapegawai['nama']; ?>';
      kembali2=kembali2+','+document.getElementById('hidden<?php echo $i; ?>').value;
      }
      }
      //}
      <?php
      }
      ?>
      }
      </script>
      </head>
      <body>
      Klik Nama Pegawai Untuk Memilih 1 Pegawai, <br />
      Untuk Memilih Banyak Pegawai pilih Checkbox Kemudian Klik OK.<br />
      <?php // jika ingin dinamis datanya, query ke database while {
      mysql_connect("localhost", "root", ""); ?>
      mysql_select_db("nama_database");
      $querypegawai = mysql_query("SELECT * FROM pegawai");
      $i=-1;
      while ($datapegawai = mysql_fetch_array($querypegawai))
      {
      $i++;
      ?>
      <input type="checkbox" name="cek<?php echo $i; ?>" id="cek<?php echo $i; ?>" />
      <a href="#" onclick="window.opener.document.getElementById('input1').value = '<?php echo $datapegawai['nama']; ?>'; window.opener.document.getElementById('input2').value = document.getElementById('hidden<?php echo $i; ?>').value; window.close(); /*window.opener.document.location='refresh.html'*/;"><?php echo $datapegawai['nama']; ?></a>
      <input name="hidden<?php echo $i; ?>" type="hidden" id="hidden<?php echo $i; ?>" value="<?php echo $datapegawai['nip']; ?>" />
      <br />
      <?php
      }
      ?>
      <input type="button" name="button3" id="button3" value="Ok" onclick="cekpegawai(); window.opener.document.getElementById('input1').value = kembali1; window.opener.document.getElementById('input2').value = kembali2; window.opener.document.getElementById('button2').style.visibility='visible'; window.close(); " />
      </body>

      Hapus
    2. anda memang penolong,thans sobat

      Hapus
    3. pas klik oke tidak bisa menutup form yang formnya dan form sebelumnya juga tidak tersisi dari pilihan cekbox

      Hapus
  2. DH Mas Nur, iya mas langsung saya coba ya
    Sekali lagi terima kasih banyak
    Amal Jariyah nih :)

    BalasHapus
  3. klo misalnya dipopup itu nambah inputan gmn gan?
    please bales!!!!

    BalasHapus
    Balasan
    1. Biasa aja gan. Beri form input atau link ke form input asal masih di window popup tersebut, kemudian ketika diklik simpan kembali lagi ke form tersebut. Asal semua id dan nama input sesuai dengan aturan diatas maka tetap akan berjalan seperti biasa. Fungsi window.opener.document... tetap akan mengarah kembali ke Halaman Web Induknya.

      Hapus
    2. Maaf.. nyelonong sedikit..
      Mohon Bantuannya bu..
      Klu script yang diatas alhamdulillah sdh berhasil dimanfaatkan.. sekali lagi terima kasih..
      Tapi ada lagi ini .. gimana perlakuannya klu form utama itu adalah table / grid... gimana cara nya mentrasfer data dari popup ke cell table atau..Gimana cara mengambil data dari popup untuk memasukka hasil data Popup ini kedalam dalam cell table imputan utama????

      Harap bantunya bu...
      Thanks..

      Hapus
  4. Terima kasih Pak Sangat Bermanfaat Sekali..
    Sudah cari kemana2 ahirnya ketemu disini get value window popup from database.. :)

    Tambahan Pak, Dicontoh hanya ditampilkan dua field, jika lebih script mana yang harus ditambahkan. Saya sudah menambahkan variable kembali3 dan input3 namun yang tampil inputan dari input2.

    Terima Kasih atas perhatiannya..

    BalasHapus
    Balasan
    1. bisa ternyata pak..

      kembali3=document.getElementById('hidden').value;

      diubah menjadi..

      kembali3=';

      hanya saja fungsi submit checkboxnya tidak berfungsi, jadi hanya bisa mengambil 1 nilai. bisa 1 saja sudah syukur.

      Terima Kasih banyak pak..
      Mudah2an ilmunya berkah..

      Hapus
  5. terima kasih banyak ni mas atas infonya....
    saya mau nanya dikit ni mas
    misalnya data nama-nama pegawainya banyak, kan terlalu banyak ni data yang ada di pop up berarti.
    gimana kalau kita buat form cari untuk menampilkan nama2 saja, jadi tinggal klik nama kayak mas buat tu.
    tolong di buatin bentar ya mas form pencariannya,, hehehe
    masih awan banget ni,
    terimakasih

    BalasHapus
  6. mau tanya gan..
    itu kan nilai variabel "NIP 2, NIP3" ditampilkan di input text..
    kalo mau ngambil nilai NIP nya itu gimana ? tp diluar input text, jadi bisa di echo langsung gitu.
    soalnya nilai itu mau sya pake buat nampilin data yg lainnya, tp masih dalam 1 form..
    kira2 gmna ya solusi nyaa ? tolong bales cepet yaa, hehe
    makasi sebelumnya :)

    BalasHapus
  7. Mohon Bantuannya semua..
    Gimana cara mengambil data dari popup untuk memasukka hasil data Popup ini kedalam dalam cell table imputan utama????

    BalasHapus
  8. Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Untuk Info lebih lanjut silahkan menghubungi kami melalui :

    Pin BB : 2B3C34F4
    YM : Aslibandar_CS
    Skype : AsliBandar
    Telp : +855882388666
    FB : AsliBandar

    BalasHapus