Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,132

HOME > บทความจากสมาชิก > PHP กับเทคนิคการ Submit Form แบบไม่เปลี่ยนหน้าโดยใช้ Target ไปยัง Iframe



 
Clound SSD Virtual Server

PHP กับเทคนิคการ Submit Form แบบไม่เปลี่ยนหน้าโดยใช้ Target ไปยัง Iframe

PHP กับเทคนิคการ Submit Form แบบไม่เปลี่ยนหน้าโดยใช้ Target ไปยัง Iframe เทคนิคนี้ไม่ใช่เป็นสิ่งใหม่ แต่ใช้มานานแล้วสำหรับการทำงานบางอย่างที่ไม่ต้องการให้มีการเปลี่ยนหน้าหลังจากเมื่อทำการกดปุ่ม Submit บน Form ในหน้าเว็บเพจ โดยการทำงานจะยังคงอยู่หน้าเดิม หลักการก็คือ ปกติแล้วเมื่อเราทำการ action form ในส่วน action="webpage.php" เมื่อมีการกด submit แล้วข้อมูลทั้งหมดจะถูกส่งไปยังไฟล์ webpage.php รวมทั้งหน้าปัจจุบันก็เปลี่ยนไปด้วย แต่วิธีการนี้เพียงเราทำการเพิ่ม method ว่า target="" ซึ่งใน method ตัว target="" สามารถสร้าง iframe เพื่อรองรับการ action ของ form แสดงผลในส่วนนี้ได้

ถ้ายังไม่เข้าใจลองมาดูตัวอย่าง

action ในระบบปกติ
<form name="frmMain" method="post" action="webpage.php">

</form>

จะเห็นว่ามีการ action="webpage.php" คือเมื่อกด submit ทุกอย่างจะไปยังหน้า webpage.php


action ในระบบ target="iframe"
<form action="webpage.php" name="frmMain" method="post" target="iframe_target">
<iframe id="iframe_target" name="iframe_target" src="#"></iframe>

</form>

จะเห็นว่าจะมีการ action="webpage.php" และ target="iframe_target" ความหมายก็คือให้ส่ง action ไปยัง webpage.php แต่แสดงผลใน iframe ที่ชื่อว่า iframe_target ซึ่งเมื่อใช้งานจริง ๆ เราจะไม่ต้องการให้เห็น iframe ซึ่งใช้ style="width:0;height:0;border:0px solid #fff;"

<iframe id="iframe_target" name="iframe_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>


หลังจากเราทำการ submit form ไปยัง iframe แล้วใน iframe ในกรณีที่ต้องการส่งผลลัพธ์กลับมายัง form หลัก ก็สามารถใช้ JavaScript ทำการ call function ใน form หลักได้เช่นเดียวกัน

window.top.window.functionMainForm();  // ใน iframe ทำการเรียก function ใน form หลัก


ตัวอย่างที่ 1 การส่งค่า action แบบไม่เปลี่ยนหน้าแบบง่าย ๆ

MyForm.php
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
</head>
<body>
	<form name="frmMain" method="post" action="SaveForm.php" target="iframe_target">
	<iframe id="iframe_target" name="iframe_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
	First Name : <input type="text" name="txtFirstName"><br>
	Last Name : <input type="text" name="txtLastName"><br>
	<input name="btnSubmit" type="submit" value="Submit">
	</form>
</body>
</html>


SaveForm.php
<?php
		$strFirstName = $_POST["txtFirstName"];
		$strLastName = $_POST["txtLastName"];
		echo "<script language=\"JavaScript\">";
		echo "alert('Sawatdee : $strFirstName $strLastName');";
		echo "</script>";
?>


Screehshot

Submit Form Action Target IFrame









คำอธิบาย
จากตัวอย่างจะเห็นว่ามีการส่ง action ไปยังไฟล์ SaveForm.php โดยส่ง target="iframe_target" คือทุกอย่างจะแสดงผลที่ iframe_target แต่กรณีนี้ iframe มีการกำหนด style="width:0;height:0;border:0px solid #fff;" คือจะมองไม่เห็น iframe การทำงานจึงเหมือนว่าทำงานอยู่ในหน้าเดิม และในไฟล์ SaveForm.php ได้มีการใช้คำสั่ง alert() ค่าที่ส่งไปมีการรับแบบ $_POST จึงได้ผลลัพธ์ดังภาพ ซึ่งในปกติแล้วการเขียน Code ในการรับค่าจะยังคงรูปแบบเดิมทุกประการ

เพิ่มเติม
นอกจากนี้ยังสามารถเขียน JavaScript เพื่อควบคุม action และ target ของ Form ได้ ลองดูตัวอย่าง

MyForm2.php
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
</head>
<body>
	<script language="JavaScript">

			function fncAction1()
			{
				frmMain.action='webpage1.php'
				frmMain.target='iframe_target';
				frmMain.submit();
			}

			function fncAction2()
			{
				frmMain.action='webpage2.php'
				frmMain.target='iframe_target';
				frmMain.submit();
			}

			function fncAction3()
			{
				frmMain.action='webpage3.php'
				frmMain.target='iframe_target';
				frmMain.submit();
			}

	</script>
	<form name="frmMain" method="post">
	<iframe id="iframe_target" name="iframe_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
	First Name : <input type="text" name="txtFirstName"><br>
	Last Name : <input type="text" name="txtLastName"><br>
	<input name="btnButton1" type="button" value="Action 1" OnClick="fncAction1()">
	<input name="btnButton2" type="button" value="Action 2" OnClick="fncAction2()">
	<input name="btnButton3" type="button" value="Action 3" OnClick="fncAction3()">
	</form>
</body>
</html>


Screehshot

Submit Form Action Target IFrame

คำอธิบาย
จากตัวอย่างจะเห็นว่าจะมีการใช้ปุ่ม button เพื่อควบคุมทิศทางของแต่ล่ะปุ่มว่าต้องการแยกการทำงานไปในทิศทางที่ต้องการ อ่านเพิ่มเติม Go to : JavaScript HTML Multiple Action Form



ตัวอย่างที่ 2 การทำ form สำหรับรับข้อมูลและบันทึกข้อมูลแบบง่าย ๆ โดยไม่เปลี่ยนหน้า โดยใช้ PHP กับ MySQL

เริ่มต้นด้วยการสร้างตารางชื่อ customer
CREATE TABLE `customer` (
  `CustomerID` varchar(4) NOT NULL,
  `Name` varchar(50) NOT NULL,
  `Email` varchar(50) NOT NULL,
  `CountryCode` varchar(2) NOT NULL,
  `Budget` double NOT NULL,
  `Used` double NOT NULL,
  PRIMARY KEY  (`CustomerID`)
) ENGINE=MyISAM;


นำคำสั่ง SQL นี้ไปสร้างตารางโดยรันผ่าน phpMyAdmin

MySQLForm.php
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
</head>
<body>
	<form action="MySQLSave.php" name="frmMain" method="post" target="iframe_target">
	<iframe id="iframe_target" name="iframe_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
	<script language="JavaScript">
		function showResult(result)
		{
			if(result==1)
			{
				document.getElementById("divResult").innerHTML = "<font color=green> Save successfully! </font>  <br>";
			}
			else
			{
				document.getElementById("divResult").innerHTML = "<font color=red> Error!! Cannot save data </font> <br>";
			}
		}
	</script>
	<div id="divResult"></div>
	<table width="320" border="1">
		<th>CustomerID </th>
		<td><input type="text" name="txtCustomerID" size="5"></td>
		</tr>
	  <tr>
	  <tr>
		<th>Name </th>
		<td><input type="text" name="txtName" size="20"></td>
		</tr>
	  <tr>
		<th>Email </th>
		<td><input type="text" name="txtEmail" size="20"></td>
		</tr>
	  <tr>
		<th>CountryCode </th>
		<td><input type="text" name="txtCountryCode" size="2"></td>
		</tr>
	  <tr>
		<th>Budget </th>
		<td><input type="text" name="txtBudget" size="5"></td>
		</tr>
	  <tr>
		<th>Used </th>
		<td><input type="text" name="txtUsed" size="5"></td>
		</tr>
	  </table>
	  <input type="submit" name="submit" value="submit">
	  </form>
</body>
</html>









MySQLSave.php
<?php
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("mydatabase");
$strSQL = "INSERT INTO customer ";
$strSQL .="(CustomerID,Name,Email,CountryCode,Budget,Used) ";
$strSQL .="VALUES ";
$strSQL .="('".$_POST["txtCustomerID"]."','".$_POST["txtName"]."','".$_POST["txtEmail"]."' ";
$strSQL .=",'".$_POST["txtCountryCode"]."','".$_POST["txtBudget"]."','".$_POST["txtUsed"]."') ";
$objQuery = mysql_query($strSQL);
if($objQuery)
{
	//echo "<script>alert('Save successfully!');</script>";
	echo "<script>window.top.window.showResult('1');</script>";
}
else
{
	//echo "<script>alert('Error! Cannot save data');</script>";
	echo "<script>window.top.window.showResult('2');</script>";
}
mysql_close($objConnect);
?>



Screehshot

PHP MySQL Submit Form Action Target IFrame

เมื่อการทำงานสมบูรณ์

PHP MySQL Submit Form Action Target IFrame

เมื่อการทำงานผิดพลาด

คำอธิบาย

จากตัวอย่างจะเห็นว่าจะมีการส่งค่าจาก MySQLForm.php โดยผ่านการ action และ target ไปยัง Iframe และในไฟล์ MySQLSave.php มีการเรียกใช้ functon ใน form หลัก โดยถ้าสมบูรณ์จะให้ทำการส่ง parameter (1) และถ้าผิดพลาดให้ส่ง parameter (2) เพื่อนำค่าที่ได้ทำงานในส่วนของ function showResult() ของ form หลัก


บทความอื่น ๆ ที่แนะนำศึกษา
Go to : Ajax Tutorial : สอน Ajax เขียน Ajax เรียน Ajax สุดยอดการใช้งาน Ajax อย่างง่าย
Go to : jQuery Tutorial : สอน jQuery เขียน jQuery กับ JavaScript เรียน jQuery ในประเทศไทย
Go to : AJAX Upload File / Upload Progress เทคนิคการอัพโหลดไฟล์ด้วย AJAX กับ PHP


   
Share
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2011-10-03
  Download : No files
Sponsored Links
Meta Tags in 2019
Meta Tags in 2019
กล่าวโดยย่อ Meta เป็นสิ่งสำคัญสำหรับเครื่องมือค้นหาทั้งหมดที่ปรากฏในโค้ด HTML ของหน้าเว็บไซต์และบอกเครื่องมือค้นหาว่าหน้าเว็บนั้นเกี่ยวกับอะไร
Rating : Update : 2019-11-15 09:26:11
C# อ่านค่า Text file มาเเสดงบน DataGridView
C# อ่านค่า Text file มาเเสดงบน DataGridView
อ่านค่า Textfile.txt มาเเสดงบน DataGridView เเล้วดึงข้อมูลมาแสดงบน Textbox พอเป็นแนวทางสำหรับ คนที่ต้องการนำไปประยุกใช้ครับ
Rating : Update : 2019-04-23 11:19:42
แก้ปัญหาการส่งอีเมลหลังจากอัพเกรดจาก PHP Version 5.4 ไปเป็น 5.6 โดยใช้ New PHPMailer
แก้ปัญหาการส่งอีเมลหลังจากอัพเกรดจาก PHP Version 5.4 ไปเป็น 5.6 โดยใช้ New PHPMailer
สืบเนื่องมาจากก่อนหน้านี้นั้นได้มีการอัพเกรด PHP Version จาก 5.4 มาเป็น 5.6 ซึ่งทำให้มีผลกระทบกับการส่งอีเมลของระบบดังนั้น วันนี้จึงได้มีข้อมูลดีๆมาแบ่งปันกัน ซึ่งดูตามรายละเอียด
Rating : Update : 2018-05-26 15:54:09
ไม่ต้องแก้ register_globals = On ก็เรียกใช้ตัวแปรแบบเดิมๆได้
ไม่ต้องแก้ register_globals = On ก็เรียกใช้ตัวแปรแบบเดิมๆได้
ปกติแล้วเวลาทำการติดตั้ง php ค่า default ของ register_globals จะเป็น Off แต่บางครั้งเราก็มีความจำเป็นที่เราจะต้องการใช้งาน ในแบบที่ register_globals=On เช่น ไม่อยากไปแก้ code โปรแกรมเดิมที่เขียนไว้ตั้งนานแล้วบ้างล่ะ แต่จะทำยังไง ถ้าหากว่า server ที่เราจำเป็นต้องใช้งานเค้ากำหนด register_globals มาให้เป็น Off ล่ะจะทำยังไง
Rating : Update : 2018-05-16 13:07:47
C#/VB.Net  สร้าง Line notify เข้า Line ส่วนตัวหรือ Group สำหรับทำระบบแจ้งเตือนผ่านระบบ line
C#/VB.Net สร้าง Line notify เข้า Line ส่วนตัวหรือ Group สำหรับทำระบบแจ้งเตือนผ่านระบบ line
สร้าง Line notify ด้วย C#.VB.Net สำหรับทำระบบแจ้งเตือนผ่านระบบ line application
Rating : Update : 2019-04-24 06:39:29
C# Extension Methods แบบ บ้านๆ
C# Extension Methods แบบ บ้านๆ
ทุกคนทีเขียนโปรแกรม ก็มักจะเจอว่าเวลาเราเรียกใช้ตัวแปร ต่างๆ แล้วพิมพ์ จุดแล้วมักจะเจอว่ามี method หรือ function ขึ้นมาให้เลือกแบบนี้
Rating : Update : 2019-04-29 15:01:47
แก้ปัญหา Facebook Like หายเมื่อเปลี่ยนจาก HTTP เป็น HTTPS
แก้ปัญหา Facebook Like หายเมื่อเปลี่ยนจาก HTTP เป็น HTTPS
ในช่วงนี้หลายๆ เว็บกำลังเปลี่ยน เว็บจาก HTTP เป็น HTTPS และถ้ามีการใช้ Plugin Facebook Like / Shared คงจะเจอปัยหา Line หายกัน
Rating : Update : 2018-09-18 15:14:43
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   







Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2020 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่