Form Object ใน Prototype.js (1.4.0)

หลังจากดู presentation A (Re)-Introduction to javaScript
ของคุณ Simon Willison จบแล้ว ก็เกิดความเข้าใจใหม่ๆขึ้นมาอีกมาก

เดิมผมจะมีปัญหากับการอ่าน javascript ที่เขียนแนว Object อยู่มาก
ที่เป็นแบบนี้ ก็เพราะ ผมเอาแนวคิดของ java (class-based) ไปตีความเจ้า javascript (Prototype-based)
ก็เลยเกิดอาการ มึนๆ งงๆ
แต่หลังจากเรียนรู้ ruby, lisp มาระยะหนึ่ง
ซึ่งช่วยขยายกรอบความคิดเกี่ยวกับเรื่อง programing language ขึ้นอีกเยอะ
ก็เลยทำให้หลังจากดู presentation ข้างบนจบ (slides ยาวมาก)
ก็เลยเกิดอาการ Satori เล็กๆขึ้นมา

ผลของ Satori ก็เลยทำให้เกิดความฮึกเหิม ย้อนกลับไปใล่ดู
source code ของ Prototype.js
โดยเลือกดูส่วนที่เกี่่ยวกับการจัดการ Form ก่อน

Object ของ Prototype ที่ใช้จัดการกับ form
ใช้ชื่อตรงตัวเลยว่า Form
ใน source code มีการประกาศไว้ดังนี้

var Form = {
  serialize: function(form) {
    ...
  },

  getElements: function(form) {
    ...
  },
  
  ...
}

method ประกอบด้วย

• serialize
  return string ที่ใช้ในการ submit form ผ่าน ajax
  ตัวอย่างการใช้งาน
  สมมติ html ดังนี้
  

  
  <form id="myform" action="#">
    <input name="input1" type="text" value="xxx"/>
    <input type="checkbox" name="input3" checked="checked" />
    <input name="input2" type="submit"/>
  </form>
  

  
  แล้วใช้คำสั่ง Form.serialize
  

  
  Form.serialize('myform');  // => input1=xxx&input3=on&input2=
  

  
  
• getElements
  รับ parameter เป็น form เหมือนกัน
  ผลลัพท์ที่ได้คือ Array ของ Element ที่อยู่ใน form (เฉพาะพวกที่ใช้ input เช่น input, textarea, ...)
  
• getInputs
  ค้นหา Element ประเภท input โดย
  รับ parameter เป็น form, ประเภทของ input และ ชื่อของ element นัั้น
  เช่น
  

  
  Form.getInputs('myform', 'text', 'input1')
  

  
  
• disable
  ไว้สั่ง diable form ที่ต้องการ
  
• enable
  สั่ง enable form ที่ต้องการ
  
• findFirstElement
  อันนี้ดูไม่ค่อยมีประโยชน์เลย รู้สึกว่าจะมีไว้ใช้ใน focusFirstElement
  
• focusFirstElement
  
• reset
  

เห็นได้ว่า method ทั้งหมด มี require parameter
เป็น form element หรือ form name ทั้งสิ้น (รับได้ทั้ง 2 แบบ)

Helper object ที่ Form เรียกใช้ มีอยู่ 2 ตัวคือ

• Form.Element
  มีแค่ 2 method คือ
  
  • serialize(element)
    อันนี้ถูกเรียกจาก Form.serialize โดยมีเป้าหมายพื่อ encode ข้อมูลเพื่อ submit
    
  • getValue(element)
    อันนี้ไว้ใช้ get ค่าที่อยู่ใน Element ที่ต้องการ
    รับ parameter เป็น element id หรือ element object ก็ได้
    
  
  
• Form.Element.Serializers
  อันนี้เป็น lower layer แล้ว ถูกเรียกใช้จาก Form.Element อีกที
  

ใน Prototype มี Helper Function ที่ชื่อ $F
ซึ่งจริงๆแล้ว ก็คือ short-cut ของ Form.Element.getValue นี่เอง

var $F = Form.Element.getValue;