ตัวอย่างต่อไปนี้ ผมจะทำการสาธิตการสร้าง function ของ javascript สำหรับเป็น function ในการดึงข้อมูลจาก fieldset ซึ่ง function นี้จะทำการ return ค่า Object ที่เก็บข้อมูล "ที่อยู่" ซึ่งผู้ใช้ function นี้จะสามารถนำข้อมูลที่อยู่ไปจัดการข้อมูลได้ง่ายขึ้น
ในตัวอย่าง ผมสร้าง 2 fieldset สำหรับกรอกข้อมูลที่อยู่ มีสองรูปแบบ คือ ประเภทที่อยู่อาศัย กับ ประเภทที่อยู่ทางการ เพราะสิ่งที่เราต้องการคือ จะดึงข้อมูลต่างๆเหล่านี้ใน textbox ทั้งหมดไปเก็บใน Object แล้ว return ค่าออกจาก function ขั้นตอนแรกจึงจำเป็นจะต้องสร้าง function มาจัดการข้อมูลให้เป็นระเบียบแล้วเก็บใส่ Object ให้เรียบร้อย สำหรับตัวอย่างเขียน fieldset มีดังนี้ ก๊อบไปแปะแล้วลองทำตามได้เลย
<fieldset id='residentAddressFieldset'>
<legend>ที่อยู่อาศัย</legend>
อาคาร <input type='text' id='residentAddressName'/>
เลขที่<input type='text' id='residentAddressNo' />
จังหวัด อำเภอ<input type='text' id='residentRegionAddress'/>
เบอร์โทร<input type='text' id='residentPhone' />
</fieldset>
<fieldset id='addressFieldset'>
<legend>ที่อยู่ทางการ</legend>
อาคาร <input type='text' id='addressName'/>
เลขที่<input type='text' id='addressNo' />
จังหวัด อำเภอ<input type='text' id='regionAddress'/>
เบอร์โทร<input type='text' id='phone' />
</fieldset>
/* ผมสร้าง function สำหรับจัดการข้อมูลต่างๆได้ดังนี้*/
function getAddressInfoFormField(selector){
/*ขั้นตอนแรกผมสร้าง Object ขึ้นมาหนึ่งตัวชื่อ addressInfo แล้วกำหนดค่าเริ่มต้นให้กับแต่ละ attribute ดังนี้*/
var addressInfo = new Object();
addressInfo.addressName = '';/*ค่าเริ่มต้นเป็นช่องว่าง*/
addressInfo.addressNo = '';
addressInfo.addressRegion = '';
addressInfo.addressPhone = '';
/*เริ่มใช้ jQuery เพื่อกดหนดค่าให้กับ addressName จาก selector ที่ส่งมาจาก parameter เราตั้งใจจะให้เป็น wrapped set ของ fieldset อธิบายง่ายๆก็คือส่งตัว fieldset มาแล้วเราสามารถค้นหาตัวต่างๆภายใน fieldset นั้นได้หมดแล้วนำข้อมูลมาใช้งาน ดังนั้นให้มองว่า selector คือ fieldset ตัวหนึ่ง เราสามารถใช้คำสั่ง find ของ jQuery เพื่อค้นหาตัวต่างๆที่อยู่ภายใน แต่ในการค้นหาคราวนี้เราต้องการให้ค้นหาโดยไม่สนใจชื่อ id ที่เป็นตัวอักษรใหญ่เล็กของภาษาอังกฤษ เราจึงจำเป็นต้องใช้คำสั่ง filter มาช่วยกรอง แล้วกำหนดการกรองข้อมูลเอาเองโดยส่ง parameter ลงให้กับฟังก์ชั่น filter เป็น function กำหนดเงื่อนไขการกรอง*/
/*ใช้ regular expression ของ javascript มาช่วย ตรง addressName แล้วใส่ ig เพื่อไม่ให้สนใจตัวอักษรใหญ่เล็ก จากนั้นให้ทำการ test กับ id ที่ส่งเข้ามาใน function filter ถ้า test ผ่านก็ให้ return ตัวๆนั้นออกไป*/
addressInfo.addressName = selector.find("*").filter(function(){
return (/addressName/ig).test(this.id);
}).val();
/*ใช้ val() เพื่อดึงค่าข้อมูลในช่องๆที่ jQuery ดึงมาได้จาก filter*/
addressInfo.addressNo = selector.find("*").filter(function(){
return (/addressNo/ig).test(this.id);
}).val();
addressInfo.addressPostal = selector.find("*").filter(function(){
return (/regionAddress/ig).test(this.id);
}).val();
addressInfo.addressPhone = selector.find("*").filter(function(){
return (/phone/ig).test(this.id);
}).val();
/*สรุป ใช้ selector ที่เป็นตัวแทนของ fieldset จากนั้นใช้ find("*") โดย * นั้นหมายถึงให้ดึงข้อมูลทุกตัวภายใต้ fieldset จากนั้นใช้ filter กรองเอาข้อมูลที่ต้องการ แต่เรากำหนด filter ให้กรองข้อมูล id โดยกำหนดให้ไม่สนใจตัวอักษรใหญ่เล็กของภาษาอังกฤษ ด้วยวิธีกำหนด function ลงใน filter*/
/*return addressInfo ที่เป็น Object ที่เราดึงข้อมูลมาเก็บออกไป*/
return addressInfo;
};
วิธีใช้งาน function ที่เราสร้างมานี้
จาก Code fieldset ตัวอย่างของเรานี้ กับ function ที่เราสร้างสมมุติว่าผมต้องการชุดข้อมูลใน fieldset ที่มี id คือ residentAddressFieldset ผมเรียก function ดังนี้
var addressInfo = getAddressInfoFormField($('#residentAddressFieldset'));
ใช้ jQuery ดึง wrapped set ที่เป็น fieldset ที่มี id เป็น residentAddressFieldset จากนั้นเอาไปเก็บในตัวแปร addressInfo
ใน addressInfo นี้ถ้าต้องการ addressNo ก็ให้ใส่จุดแล้วใส่ชื่อ attribute ที่เราต้องการข้อมูลของมันได้เลย เช่น
addressInfo.addressNo;
จบตัวอย่าง สาธิตการสร้าง function javascript ผสม jQuery เพื่อดึงชุดข้อมูล ในตัวอย่างนี้ function มีประโยชน์มากสมควรสร้างขึ้นมา เพราะไม่ว่าเราจะมีชุดข้อมูลใน fieldset กี่อย่างๆที่เกี่ยวกับ 'ที่อยู่' เวลาทำงาน ให้เราเรียกใช้ function ตัวที่เราสร้างมาเพื่อที่จะดึงข้อมูลมาใช้ประโยชน์ได้ทันที แต่ในกรณีตัวอย่างนี้ที่ผมเอาไปใช้จริง ผมดึงข้อมูลชุดข้อมูล 'ที่อยู่' ออกมาแล้วนำมาเรียงที่อยู่ให้สวยงามแล้วแสดงออกทางหน้าจอให้ user ได้เห็นแบบสวยๆงามๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น