readonly & disabled : HTML Attribute

สิ่งที่ผมจะเขียนต่อไปนี้ เป็นเรื่องง่ายๆ ที่ผมพลาดเอง.... #กว่าจะรู้ก็ น้ำตาจะไหล...

เล่าให้ฟังเล่นๆนะครับ(paragraph นี้สาระไม่ค่อยมี) โปรแกรมที่ผมทำตอนนั้น เป็น textbox ธรรมดาที่จะต้อง submit ค่าเข้า servlet แต่ในบางโหมดผมก็ต้องให้มันไม่สามารถแก้ไขข้อมูลได้ และผมต้องการ clear ค่าใน textbox นั้นๆ ด้วย เพื่อเก็บลงฐานข้อมูลเป็นค่าว่างๆ สิ่งที่ผมทำก็คือ ใช้ javascript ใส่ disabled เข้าไป แต่ผลปรากฏว่า servlet ไม่ได้ค่าว่างมาอย่างที่ตั้งใจไว้ ประกอบกับโปรแกรมที่ผมทำอยู่ก็ไม่ได้เรียก servlet โดยตรง มี Struts Framework เข้ามาใช้ด้วย ตอนนั้นก็เลยไปโฟกัสที่เรื่องของ scope ของเว็บ  (หลงทางเข้าไปอีก) ไปๆมาๆ สุดท้ายได้คำตอบว่า ต้องเปลี่ยน disabled เป็น readonly แทน...

จากที่ผมหลงทางไปไกลแล้วนั้น ผมก็มานั่งคิดทบทวนว่า มันเป็นได้ยังไง แค่เปลี่ยน attribute html เนี่ยนะ!! หลายคนอาจจะรู้อยู่แล้ว ยอมรับเลยครับว่า "ผมเพิ่งรู้" และผมก็กำลังจะอธิบายให้ทุกคนได้รู้ด้วยครับ...

disabled กับ readonly ดูผ่านๆ ก็คือพิมพ์ในช่องไม่ได้เหมือนกัน แต่ disabled จะเปลี่ยน textbox ของเราเป็นสีเทาด้วย และแน่นอนมันไม่ได้ต่างกันแค่นี้แน่ ผมทดสอบโดยการสร้าง textbox ที่เป็น disabled กับ readonly ปะปนกันอยู่ จากนั้นก็ให้ทำการ submit แบบ GET เพื่อสังเกต URL ผลปรากฏว่า โอ้.. ถ้ามันเป็น disabled แล้ว จะมีค่าหรือไม่มี ยังไงมันก็ไม่ส่งไป... ลองดูตัวอย่างดีกว่าครับ ^^

อันนี้ผมวาด HTML ขึ้นมาชุดนึง ใส่ disabled, readonly สลับกันไป มีปุ่ม changeText ไว้เปลี่ยนค่าในช่องด้วย javascript ส่วน clear ก็ไว้สำหรับทำให้เป็นว่างๆ จากนั้นทดสอบด้วยการกด SUBMIT เพื่อสังเกต URL ครับ

<form name="disabledForm">
<table style="text-align: center;">
  <tbody>
<tr>
   <td>disabled#1</td>
   <td><input disabled="" name="text1" type="text" value="text1" /></td>
  </tr>
<tr>
   <td>readonly</td>
   <td><input name="text2" readonly="" type="text" value="text2" /></td>
  </tr>
<tr>
   <td>disabled#2</td>
   <td><input disabled="" name="text3" type="text" value="text3" /></td>
  </tr>
<tr>
   <td colspan="2" style="text-align: center;"><input onclick="changeText()" style="width: 45%;" type="button" value="changeText" />
    <input onclick="changeText(true)" style="width: 45%;" type="button" value="clear" />
   </td>
  </tr>
<tr>
   <td colspan="2" style="text-align: center;"><input style="width: 100%;" type="submit" value="SUBMIT" />
   </td>
  </tr>
</tbody></table>
</form>
javascript ไม่มีอะไรมาก แค่ทำงานตามปุ่ม changeText / clear
function changeText(isClear) {
document.disabledForm.text1.value = isClear ? '' : 'text1 changed';
document.disabledForm.text2.value = isClear ? '' : 'text2 changed';
document.disabledForm.text3.value = isClear ? '' : 'text3 changed';
}

เมื่อดู source code คร่าวๆ แล้วก็มาลองกันเลยครับ ^_^
disabled#1
readonly
disabled#2
**ลองกดดูได้ แต่หน้าเว็บจะ error นะครับ ให้สังเกต URL ใน address bar สำหรับกรณีต่างๆ
สังเกตว่า ไม่ว่าเราจะเปลี่ยนข้อความ หรือว่า clear ไปเลยก็ตามแต่ ตราบใดที่ disabled อยู่ parameter ของตัวนั้นๆ ก็เหมือนไม่มี(ไม่ส่งไปเลย) ในขณะที่ readonly ไม่ว่าจะยังไง ค่าก็จะถูกส่งไปอยู่ดีครับ

เมื่อเข้าใจแล้วก็ลองเลือกปรับใช้ให้เหมาะสมกับโปรแกรมของเราให้ดีนะครับ


Facebook Comment

Popular post of 7 days

[Java] ความแตกต่างระหว่าง Overloading กับ Overriding

ลืมรหัสปลดล็อค Android เข้าเครื่องไม่ได้ มีทางออกครับ

[Android] เปิดเครื่องไม่ได้ โลโก้ค้าง (Boot Loop)