ตัวอย่างวิธีการต่อไปนี้ เป็นไปในลักษณะ ให้ข้อมูลจาก ฟอร์มในหน้า popup
เมื่อทำการกดปุ่ม submit ให้ส่งค่ามาที่หน้า ที่ทำการเปิด popup
ตัวอย่าง
เปิด popup
แนวทางการทดสอบ ให้คลิกที่ลิ้งค์ว่า เปิด popup
ในหน้าหลัก โดยในหน้าหลักมี textbox ที่มี id เท่ากับ data1 สำหรับทดสอบรับค่าจาก popup
จากนั้นหน้า popup ก็จะแสดง โดยในตัวอย่าง จะแสดงฟอร์มที่มี textbox กับ ปุ่ม submit
เมื่อกรอกข้อมูลในช่อง textbox ของหน้า popup แล้วกดปุ่ม submit ข้อมูลนั้นก็จะมาแสดง
ที่ textbox ที่มี id เท่ากับ data1 ในหน้าหลัก
ในตัวอย่างเป็นเพียงแนวทางเท่านั้น สามารถศึกษาและประยุกต์เพิ่มเติมตามต้องการ
ส่วนสำคัญคือ การใช้งาน jQuery ในการอ้างอิงถึง object ในหน้าหลัก ตามตัวอย่างดังนี้
$("#data1",window.opener.document);
หมายถึง textbox ที่มี id เท่ากับ data1 ของหน้าหลัก
ตัวอย่างโค้ดทดสอบ หน้าหลัก
<form id="form1" name="form1" method="post" action="">
<input type="text" name="data1" id="data1" />
</form>
<a href="javascript:popup('main_and_popup2.php','',400,100)" >เปิด popup </a>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function popup(url,name,windowWidth,windowHeight){
myleft=(screen.width)?(screen.width-windowWidth)/2:100;
mytop=(screen.height)?(screen.height-windowHeight)/2:100;
properties = "width="+windowWidth+",height="+windowHeight;
properties +=",scrollbars=yes, top="+mytop+",left="+myleft;
window.open(url,name,properties);
}
ตัวอย่างโค้ดไฟล์ popup
<!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>main and popup</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="data1_popup" id="data1_popup" />
<input type="submit" name="button" id="button" value="Submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form1").submit(function(){
var opener_obj=$("#data1",window.opener.document);
opener_obj.val($("#data1_popup").val());
window.close();
return false;
});
// jQuery code
});
</script>
</body>
</html>
