Feb
28
2008

submit form ให้ขึ้นเป็น popup และอยู่กลางจอ

3,639 views

อาจจะมีความจำเป็นในบางงาน ที่จะต้องมีการ submit form ให้ขึ้นเป็นหน้าใหม่ ยกตัวอย่างเช่น การ submit form ไปเรียก php, aspx ข้าม domain หรือคนละ server ซึ่งการกดปุ่ม submit แล้วขึ้นเป็น windows ใหม่เลยมันก็ดูแสนจะธรรมดา แถมยังอาจจะดูไม่ค่อยดีเท่าไหร่

แต่ถ้าทำให้เป็น popup น่าจะดีกว่า เพราะจำกัดการแสดงผลได้ และผู้ใช้จะปิด popup ได้ง่ายกว่า ผมว่าถ้าจะทำอะไรแล้วต้องทำให้ดีที่สุด นอกจากจะเป็น popup แล้วก็ยังต้องการให้อยู่กลางจอด้วยเพื่อความสวยงาม มาดูตัวอย่างกันครับ

function submitPopup (objForm,W,H,S) {
	// W = width, H = height, S = scrollbar
	var winleft	=	(screen.width - W) / 2;
	var winup	=	(screen.height - H) / 2;
	winProp		=	'width='+W+',height='+H+',left='+winleft+',top='+winup+',scrollbars='+S+',resizable' + ',status=yes'
 
	objForm.target = "newPopup";
	window.open('', "newPopup", winProp);
	objForm.submit();
}

ตัว function javascript ด้านบน ทำงานดังนี้
1. คำนวณตำแหน่งกลางจอ
2. ทำการสร้าง popup ขึ้นมามีชื่อว่า newPopup
3. สั่ง submit form

 
<form action="/path/to/script.php" method="post" name="frmTest" id="frmTest" target="newPopup">
<input type="text" value="test" name="test" id="test">
<input type="button" value="Submit" name="Submit" id="Submit" onClick="submitPopup(document.frmTest,300,400,'no');">
<a href="javascript:submitPopup(document.frmTest,300,400,'no');">Submit</a>
</form>
 

คำสั่ง html ทำงานดังนี้
1. เมื่อกดปุ่ม Submit หรือ click link ที่คำว่า Submit จะไปเรียก function submitPopup() ของ javascript ให้ทำงานโดยส่ง parameter ไป 4 ตัว
2. จุดสังเกตุคือ target="newPopup" ใน tag form จะชื่อเดียวกับ popup ที่สร้างใหม่จาก javascript นั่นเอง เพราะถ้าเราใส่ชื่อ target ที่ไม่มีอยู่จริงมันจะเด้งเป็นหน้าใหม่ แต่ว่าตัว javascript ไปดักสร้าง popup ชื่อว่า newPopup ไว้ทำให้ form ถูก submit ไปยัง popup ดังกล่าวนั่นเอง


Written by Pipo in: Developer | Tags: , , ,

2 Comments »

  • เข้าใจยากไปนิดนึงส์นะครับ ของ่ายกว่านี้อีกนิดนะ

    อิอิ

    Comment by finzaa — March 20, 2008
  • ลองแล้วอ่าครับ ไม่ขึ้นอ่า

    Comment by finzaa — March 20, 2008

RSS feed for comments on this post. TrackBack URL

Leave a comment

Page 1 of 11

Powered by WordPress | Aeros Theme | TheBuckmaker.com WordPress Themes