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.
Diposting oleh di
Label: ,

17 komentar:

  1. Nur Amijaya12 Juli 2013 pukul 18.37

    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. Nur Amijaya12 Juli 2013 pukul 18.47

      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. tady bear's19 Mei 2014 pukul 23.28

      anda memang penolong,thans sobat

      Hapus
    3. tady bear's19 Mei 2014 pukul 23.40

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

      Hapus
  2. A L I F13 Juli 2013 pukul 05.26

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

    BalasHapus
  3. Unknown1 Agustus 2013 pukul 11.59

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

    BalasHapus
    Balasan
    1. Nur Amijaya11 Agustus 2013 pukul 05.59

      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. Unknown1 Maret 2015 pukul 18.45

      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. Unknown13 Agustus 2013 pukul 21.22

    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. Unknown13 Agustus 2013 pukul 21.38

      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. Unknown10 September 2013 pukul 12.47

    makasi gan infonya..:)

    BalasHapus
  6. Unknown20 Januari 2014 pukul 07.53

    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
  7. Unknown16 Februari 2014 pukul 20.32

    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
  8. Unknown1 Maret 2015 pukul 18.37

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

    BalasHapus
  9. Unknown6 Oktober 2016 pukul 04.18

    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
  10. Unknown21 Desember 2017 pukul 06.45

    Gan kalo yang di ceklist dibatasi misalnya cuma boleh dua aja gimana gan?

    BalasHapus
  11. michele wijaya27 Maret 2018 pukul 09.08

    Halo Bossku ^^
    Segera Daftarkan ID di skb288,com
    Menyediakan 7 Permain Hanya Dengan 1 ID
    Serta Tersedia Promo Menarik
    Bonus Turn Over Terbesar
    Bonus Refferal Seumur Hidup
    Minimal Deposit Hanya 20Rb
    BBM : D8E87241
    WA : +62 878 8707 6927
    Di Tunggu Kehadirannya Bossku ^^

    BalasHapus

Langganan: Posting Komentar (Atom)