คราวที่แล้ว เราพูดถึงเรื่องการสร้าง 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”

AJAX Form

การใช้ 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.

AJAX, AJAX Form, PHP