คราวที่แล้ว เราพูดถึงเรื่องการสร้าง Form จาก AJAX ครับ ต่อมา มีผู้ใช้งาน DeeMocDiy บางท่าน ส่งอีเมลมาถึง

Mr. Moc ให้ช่วยเขียนถึงเรื่องการเพิ่ม Field เข้าไป form ที่เราได้สร้างเอาไว้แล้ว ส่วนจะสนุกสนานเพียงใด มาดูกันได้ครับ

1. ก่อนอื่น เพิ่ม Fileds ที่เราต้องการก่อน:

<code><label>Psssword </label><input type=’password’ id=’password’ name=’password’/></code>

<code><label>Confirm PAssword</label><input type=’confirm_password’ id=’confirm_password’ name=’confirm_password’/></code>

2. เพิ่มการดักจับและเอาข้อมูลจาก Text Field ที่เราเพิ่มขึ้น

var password = document.getElementById(’password’).value;
var confirm_password = document.getElementById(’ confirm_password’).value;

3. เพิ่มส่วนของการส่งข้อมูลไปยัง ปลายทางของ AJAX message
url=url+”&password=”+password;
url=url+”& confirm_password=”+confirm_password;

4. จากนั้นตรงปลายทาง “signup.php”

สำหรับ Code PHP ที่เราเอาไว้รับ Sign up data เป็นดังนี้ (signup.php)

echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].” ”;

echo “Email : “.$_REQUEST['email'].”
”;

echo “Password : “.$_REQUEST['password'].”
”;

echo “Confirm password: “.$_REQUEST['confirm_password'].”
”;

?>
เพียงเท่านี้ เราก็สามารถเพิ่ม Field เข้าไปใน AJAX Form ได้แล้วครับผม
คราวหน้า หากท่านผู้ใช้ DeeMocDIY ท่านใด มีข้อสงสัยเรื่อง Programming ทาง Mr.Moc ยินดีตอบทุกคำถามนะครับ

การใช้ AJAX สร้าง Sign up Form

AJAX = Asynchronous JavaScript and XML

AJAX ไม่ใช่ภาษา Programming ใหม่ แต่เป็นเทคนิคและวิธีการที่ทำให้เราทำงานได้เร็วขึ้น ง่ายขึ้น มีการโต้ตอบกันสวยงามขึ้นบนหน้าเว็บ

AJAX สามารถติดต่อไปยัง Server ดโดยตรงได้โดยการใช้ XMLHttpRequest object. ด้วย object ตัวนี้ (มาพร้อมกับ Javascript) ทำให้เราสามารถรับ-ส่งข้อมูลได้โดยไม่ต้องมีการ Refresh หน้าจอ

AJAX สามารถแลกเปลี่ยนข้อมูลที่ไม่มากนัก เพราะฉะนั้้นเราไม่ควรพยายามที่จะส่งหน้า Page ทั้งหน้า (พวกทีมี Javascript และ Flash เยอะๆ)

เริ่มสร้างกันเลย

ขั้นตอนที่ 1 . สร้าง Sign up Form ปล่าวๆ ตัว form ที่ใช้กับ AJAX อาจจะแปลกนิดนึงตรงที่เราไม่จำเป็นต้องมี action attribute ของ <form> tag เพราะเราจะใช้ความสามารถของ DOM เพื่อใช้งาน Object ต่างๆบนหน้า HTML document.

Code HTML ของ Form ของเรา (index.html)

<form>

<label>First Name</label><input type=’text’ name=’first_name’ id=’first_name’ /><br />

<label>Last Name</label><input type=’text’ name=’last_name’ id=’last_name’ /><br />

<label>Email</label><input type=’text’ name=’email’ id=’email’ /><br />

<input type=’submit’ value=’Register’ />

</form>

หน้าตาของ Form จะออกมาเป็นแบบนี้

เรื่องความสวยงามของ Form อันนี้้ก็แล้วแต่ความสามารถของแต่ละคนแล้วล่ะครับ

1.เตรียม Code หน้า Sign Up เพื่อไว้รอรับข้อมูลจาก Form ก่อน

มาถึงขั้นตอนที่เราจะเขียน Code PHP เพื่อรับข้อมูลจาก Form กันแล้ว โดยปกติเราจะส่งข้อมูลไปยังหน้าต่อไปนั้น จะนิยมใช้การส่งข้อมูลแบบ POST และ GET ซึ่งทาง PHP ได้สร้าง Global Variables เอาไว้รองรับแล้ว ชื่อว่า $_POST และ $_GET ตรงๆตัวครบ และแถมยังใจดี สร้างตัวแปรที่ชื่อว่า $_REQUEST เพื่อมาไว้รองรับ การส่งข้อมูลทางการ Submit ได้ทั้สองแบบคือ POST and GET ไม่ว่าจะส่งมาแบบใดก็ได้ครับ (ส่วนตัวผมชอบใช้ตัวนี้ สะดวกดี ดังนั้นขอใช้อันนี้ละกันนะครับ)

สำหรับ Code PHP ที่เราเอาไว้รับ Sign up data เป็นดังนี้ (signup.php)

<?

echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].”<br />”;

echo “Email : “.$_REQUEST['email'].”<br />”;

?>

2.เตรียม Code AJAX และ DIV ของการแสดงผล

เพิ่มเติมตรงปุ่ม Submit ให้เรียบร้อย จาก

<input type=’submit’ value=’Register’ />

เปลี่ยนเป็น

<input type=’submit’ value=’Register’ onclick=’sendRequest();’ />

ส่วน Function sendRequest(); จะเป็นของ AJAX code ดังนี้

<script>

var xmlhttp

function sendRequest()

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

{

alert (”Your browser does not support XMLHTTP!”);

return;

}

// ใช้ DOM เพื่อ ดึงค่าจาก first name text box

var first_name = document.getElementById(’first_name’).value;

// ใช้ DOM เพื่อ ดึงค่าจาก last name text box

var last_name = document.getElementById(’last_name’).value;

// ใช้ DOM เพื่อ ดึงค่าจาก email

var email = document.getElementById(’email’).value;

var url=”signup.php”;

// ชื่อ file ของ script ปลายทาง

url=url+”?first_name=”+first_name;

url=url+”&last_name=”+last_name;

url=url+”&email=”+email;

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open(”GET”,url,true);

xmlhttp.send(null);

// ส่งข้อมูลไปยังปลายทาง

}

function stateChanged()

{

if (xmlhttp.readyState==4)

{

document.getElementById(”result”).innerHTML=xmlhttp.responseText;

//รับข้อมูลและแสดงใน DIV ที่ต้องการ (เราต้องสร้าง DIV ชื่อ result เพื่อไว้แสดงผล)

}

}

function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.ActiveXObject)

{

// code for IE6, IE5

return new ActiveXObject(”Microsoft.XMLHTTP”);

}

return null;

}

</script>

เมื่อรวม ทั้งหมดเข้าด้วยกัน จะได้ code ทั้งหมด ดังนัี้

1.

index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<head>

<title>AJAX-Example Form : DeeMocDIY Whitepaper</title>

<script>

var xmlhttp

function sendRequest()

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

{

alert (”Your browser does not support XMLHTTP!”);

return;

}

var first_name = document.getElementById(’first_name’).value;

var last_name = document.getElementById(’last_name’).value;

var email = document.getElementById(’email’).value;

var url=”signup.php”;

url=url+”?first_name=”+first_name;

url=url+”&last_name=”+last_name;

url=url+”&email=”+email;

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open(”GET”,url,true);

xmlhttp.send(null);

}

function stateChanged()

{

if (xmlhttp.readyState==4)

{

document.getElementById(”result”).innerHTML=xmlhttp.responseText;

}

}

function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.ActiveXObject)

{

// code for IE6, IE5

return new ActiveXObject(”Microsoft.XMLHTTP”);

}

return null;

}

</script>

</head>

<body>

<br /><br />

<center>

<div id=’result’ style=’border:1px solid #ddd; padding:5px; margin:3px; width: 300px;’></div>

<br /><br />

<form>

<label>First Name :</label><input type=’text’ name=’first_name’ id=’first_name’ /><br />

<label>Last Name :</label><input type=’text’ name=’last_name’ id=’last_name’ /><br />

<label style=’padding-right:10px;’>Email :</label><input type=’text’ name=’email’ id=’email’ /><br />

<input type=’button’ value=’Register’ onclick=’sendRequest();’ />

</form>

</center>

</body>

</html>

2. signup.php

<?

echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].”<br />”;

echo “Email : “.$_REQUEST['email'].”<br />”;

?>

ผลลัพธ์ที่ได้ ออกมาเป็นแบบนี้

เป็นอย่างไรบ้างครับ การส้ราง Register Form โดยใช้ AJAX ง่ายมากใช่มั้ยครับ ส่วนเราสามารถเอาไปต่อยอดได้โดย เช่น

เพิ่ม Script Validation ของ Form หรือ เอาข้อมูลจากหน้า signup.php ไปลง database เป็นต้น หากมีข้อสงสัยติดต่อมาได้ที่

watcharagon@deemoc.com นะครับ ส่วนบทต่อไปจะเป็นเรื่องเกี่ยวกับการใช้ RSS reader & Parser นะครับ สนุกแน่นอนครับ