Heem : Knowledge Sharing

อ่านหัวข้อแล้วบางคนอาจจะงง ว่ามันคืออะไร ในที่นี้ถ้าเข้าใจง่ายๆ ก็คือวิธีการส่งค่าจากหน้าต่าง Popup (Child window)  ไปยังหน้าต่างที่เปิด Popup นั้น (Parent window)  ในที่นี้ขอเรียกว่า หน้าต่างป๊อปอัพ และหน้าต่างหลักนะครับ

จากหน้าต่างป๊อปอัพ เมื่อถูกเปิดขึ้นแล้ว เราจะสามารถส่งค่างต่าไปยังหน้าต่างหลักได้โดยใช้ JavaScript  เราจะเรียกหน้าต่างหลักว่า opener ดังนั้น หน้าต่างป๊อปอัพจะส่งค่าไปได้โดยใช้ opener.document

เพื่อความเข้าใจ
สมมติให้ฟอร์มจากหน้าต่างหลักชื่อ frm1 และกล่องข้อความ(textbox) ที่เราจะใช้รับค่ามาชื่อ p_value ดังนั้นจากหน้าต่างป๊อปอัพเราเข้าถึงกล่องข้อความในหน้าต่างหลักได้โดยใช้

opener.document.frm1.p_value = "ค่าที่ต้องการส่ง";

แต่ถ้าหากเราต้องการส่งค่าจากวัตถุ(object) อื่นๆในหน้าต่างป๊อปอัพ ไปยังหน้าต่างหลักได้โดยการอ้างถึงวัตถุนั้นๆ ยกตัวอย่างเช่นต้องการส่งค่าจาก c_value ในหน้าต่างป๊อปอัพไป เราจะใช้ได้ว่า

opener.document.frm1.p_value = document.frmChild.c_value.value;

เราสามารถใส่ไว้ในฟังก์ชั่น และเรียกฟังก์ชั่นจาก onclick ของปุ่มได้ และหลังจากส่งค่าแล้ว เราสามารถสั่งให้ปิดหน้าต่างป๊อปอัพได้ด้วย

self.close();

ตัวอย่างนะครับ คลิกที่ข้อความเพื่อเปิดป๊อปอัพ และใส่ข้อมูลลงในหน้าต่างป๊อปอัพ และเมื่อกดส่งข้อมูล ข้อมูลก็จะมาอยู่ที่หน้าต่างหลักนี้ครับ

 
นี่คือตัวอย่างโค้ดของหน้าต่างหลัก

<form id="frm1" enctype="application/x-www-form-urlencoded" method="post">
<input id="p_value" name="p_value" size="10" type="text" />
<a onclick="window.open('popup.html','tester','width=320,height=150');" href="javascript:void(0);">เปิด PopUp</a>
</form>

และนี่คือตัวอย่างโค้ดของหน้าต่างป๊อปอัพ

<script type="text/javascript">
function pass_value(){
  opener.document.getElementById("p_value").value = document.frmChild.c_value.value;
  self.close();
}
</script>
<form id="frmChild" enctype="application/x-www-form-urlencoded" method="post">

ใส่ค่าที่ต้องการส่ง
<input id="c_value" name="c_value" type="text" />
<input id="click" onclick="pass_value()" name="click" type="button" value="Submit" />
</form>

ลองนำไปประยุกต์ดูนะครับ

Programming Javascript, opener, Programming