เมธอด .serializeArray() เพื่อรับข้อมูลจาก From
การรับข้อมูลจาก form เราสามารถทำได้หลายวิธี จะส่งไปยัง backend หรือ ส่งไปฝั่งเซิฟเวอร์เลยก็ได้ เช่น เมื่อกรอกฟอร์มเสร็จแล้วส่งไปให้php รับค่าเลย หรือจะใช้บางอย่างมาคั่นกลางก่อนส่งไป เพื่อทำตรวจสอบข้อมูลว่าถูกต้องหรือตามรูปแบบที่กำหนดหรือไม่ เราสามารถนำjQuery ซึ่งเป็น JavaScript Library นี้มาใช้งานได้ บทความนี้จะทำตัวอย่างการรับค่าจาก form โดยใช้เมธอด .serializeArray() และแสดงผลเป็น Json หรือสใครจะเอาไปประยุกต์ต่อเพิ่มเติมก็ได้
เมธอด .serializeArray() เป็นรูปแบบการสร้างชุดของ string ค่าตัวแปรในรูปแบบของ array เพื่อเหมาะสมต่อการส่งค่าตัวแปร และการนำไปใช้
ตัวอย่าง form
<form>
<div><input type="text" name="FN" value="John" id="FN"></div>
<div><input type="text" name="LN" value="Minda" id="LN"></div>
<div><input type="hidden" name="id" value="3" id="id"></div>
<div>
<textarea name="aboutme" rows="8" cols="40">I like apple</textarea>
</div>
<div><select name="gender">
<option value="male" selected="selected">male</option>
<option value="female">female</option>
</select></div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
</form>จาก form เราจะเห็นว่า มีกำหนด value เรียบร้อยแล้ว ซึ่ง value นี้คือเสมือนข้อมูลที่ผู้ใช้กรอกเข้ามาน่ะครับ
ต่อไปเราจะใช้ เมธอด .serializeArray() เพื่อรับข้อมูลและ console.log ข้อมูลที่ได้รับมา โดยใช้โค้ดดังตัวอย่างนี้
$( "form" ).submit(function( event ) {
console.log( $( this ).serializeArray() );
event.preventDefault();
});Method .serializeArray() จะทำการเตรียมข้อมูลจากฟอร์มเพื่อใช้งานโดยจัดในรูปแบบ javascript array ของ object โดยแต่ละ object จะมีProperties ชื่อ name
และ value
ผลลัพธ์ที่ได้มาผ่าน console ดังนี้ครับ
[
{
name: "FN",
value: "John"
},
{
name: "LN",
value: "Minda"
},
{
name: "ID",
value: "3"
},
{
name: "aboutme",
value: "I like apple"
},
{
name: "gender",
value: "male"
}
]ในผลลัพธ์ เราเพียงแค่ใช้เมธอดนี้ครั้งเดียวสามารถรับข้อมูลจากฟอร์มได้ทุกฟิลต์ ไม่จำเป็นต้องรับทีละอย่างทีละครั้งและโค้ดที่ยาวยื่ด โดยการใช้ selecter 'form' ร่วมกับ เมธอด .serializeArray() หวังว่าสามารถนำไปประยุกต์ต่อให้เข้ากับโปรเจ็คของเราน่ะครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery
