การอ้างอิง object ในหน้าหลัก จากหน้า popup ด้วย jQuery อย่างง่าย

เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee
popup object jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ popup object jquery

ดูแล้ว 22,398 ครั้ง


ตัวอย่างวิธีการต่อไปนี้ เป็นไปในลักษณะ ให้ข้อมูลจาก ฟอร์มในหน้า 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>

 

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ