ส่งค่าจากหน้าต่างป๊อปอัพไปยังหน้าต่างหลัก

อ่านหัวข้อแล้วบางคนอาจจะงง ว่ามันคืออะไร ในที่นี้ถ้าเข้าใจง่ายๆ ก็คือวิธีการส่งค่าจากหน้าต่าง 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" method="post" enctype="application/x-www-form-urlencoded">
<input id="p_value" type="text" name="p_value" size="10" />
<a onclick="window.open('popup.html','tester','width=320,height=150');" href="javascript:void(0);">เปิด PopUp</a>
</form>

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

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

<form id="frmChild" method="post" enctype="application/x-www-form-urlencoded">
<br>ใส่ค่าที่ต้องการส่ง<br><input id="c_value" type="text" name="c_value" />
<br><input id="click" onclick="pass_value()" type="button" name="click" value="Submit" />
</form>

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