Javascript ile popup pencereden kök pencereye form değerleri taşımak


Javascript ile açılan popup pencereden kök pencereye form değerleri (textfield) taşıyabilir hatta popup üzerindeki herhangi bir eleman ile kök formu submit edebilirsiniz.

Bu işlev için önce kök sayfada (main.html) <head> </head> tagları arasına şu kodları ekliyoruz:

1
2
3
4
5
6
7
8
9
10
<script language="JavaScript">
<!--
myPopup = '';

function openPopup(url) {
    myPopup = window.open(url,'popupWindow','width=400,height=200');
    if (!myPopup.opener)
         myPopup.opener = self; }
//-->
</script>

Daha sonra bu sayfadaki formu ve popup pencereden gönderilecek olan metnin yazdırılacağı textfield’i ayarlıyoruz (<body> </body> tagları arasına):

1
2
3
4
<form name="kokForm">
<input type="button" value="Popup Aç" onClick="openPopup('popup.html')"><br><br>
<input name="deger" type="text"> <input type="submit" value="Formu Gönder">
</form>

Sıra popup pencereyi ayarlamaya geldi (popup.html), yine <head> </head> tagları arasına aşağıdaki javascript kodlarını ekliyoruz:

1
2
3
4
5
6
7
8
9
10
<script language="JavaScript">
<!--
function copyForm() {
    opener.document.kokForm.deger.value = document.popupForm.girilecek.value;
    // opener.document.kokForm.submit(); // Kök sayfadaki formu submit etmek için
    // window.close(); // Popup pencereyi kapatmak için
    return false;
}
//-->
</script>

Burdaki “// opener.document.kokForm.submit();” ifadesi main.html isimli kök sayfamızdaki formu popup pencere üzerinden submit etmeye yarıyor, satır başındaki // ifadesini kaldırarak aktif olmasını sağlayabilirsiniz. Yine “// window.close();” de adından da anlaşılabileceği üzere popup pencerenin form elemanı gönderildikten sonra kapatılmasını sağlıyor, onun da başındaki // ifadelesini kaldırarak aktif olmasını sağlayabilirsiniz.

Daha sonra popup pencere içerisindeki formu ve kök pencereye gönderilecek değeri içerecek olan text inputunu bir kaç satırla ayarlıyoruz (<body> </body> tagları arasına):

1
2
3
<form name="popupForm" onSubmit="return copyForm()">
<input type="text" name="girilecek"> <input type="button" value="Ekle" onClick="copyForm()">
</form>

Hepsi bu kadar, bilinen tarayıcılar tarafından desteklenen ve bir o kadar basit nur topu gibi bir scriptimiz oldu. main.html ve popup.html isimleriyle kaydettiğiniz sayfaları şimdi test edebilirsiniz.

Scriptin detaylı örneği için:
Demo

İlginizi Çekebilecek Diğer İçerikler

11 Yorum

  1. Ahmet Burak Abdikoğlu dedi ki:

    ben bu adamı seviyorum ya :)

  2. WebmasterMeMo dedi ki:

    paylasim icin tsk ederim

  3. Caner Öncel dedi ki:

    O adam da sana karşı boş değil Ahmet :)

  4. Ramazan dedi ki:

    merhaba,
    paylaşımlarınız çok güzel.

    ben bu şekilde popup pencereden veri tabanında arama yapıp çıkan sonuçlardan seçtigim degeri kök pencereye göndermek istiyorum bunu nasıl yapabiliriz. burada input daki veriyi kök pencereye atıyor istedigim şekilde yapamadım yardım ederseniz çok sevinirim

    iyi çalışmalar baarılarınızın devamını dilerim..

  5. Coşku DEMİRHAN dedi ki:

    günlerdir tabiri caizse debelenerek bunu aradım :D şimdi mutluluklardayım

  6. tugce dedi ki:

    Arkadaslar ben bu örneğe bakarak benzer bir uygulama yaptım ancak bu uygulama benm bılgısayarımda calısııyor baska bilgisayarlarda denettim olmuyor yani ana forma göndermiyor. herhangi bir yolda belirtmedim… :S Fikri olan var mı?

  7. Emre dedi ki:

    eline sağlık panpa.

  8. Ali dedi ki:

    merhaba,
    paylaşımlarınız için teşekkürler.

    ben bu şekilde popup pencereden veri tabanında arama yapıp çıkan sonuçlardan seçtigim degeri kök pencereye göndermek istiyorum bunu nasıl yapabiliriz. burada input daki veriyi kök pencereye atıyor istedigim şekilde yapamadım yardım ederseniz çok sevinirim

    iyi çalışmalar baarılarınızın devamını dilerim..

  9. Erkan dedi ki:

    Teşekkürler işimizi gördük sayenizde

  10. şenol dedi ki:

    hocam peki aynı şeklde linkin üzerine maus üzerine geldiği zaman açılıanı nasıl yaparız

  11. seydi altındağlı dedi ki:

    buna benzer bir şey lazım bana.

    bir sayfadan popup açılacak.

    popup açan sayfada – popup açıldı – yazacak

    eğer popup kapanırsa – popup kapandı – yazacak.

    bu kod hakkında yardımcı olur musunuz?

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Caner Öncel için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir