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

Facebook Yorumları

10 Yorum

  1. 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..

  2. tugce

    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ı?

  3. Ali

    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..

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

Bir Cevap Yazın

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