(ภาคต่อ แก้ไข อัพเดท) โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax Code PHP select Provicne Umphur District with Edit

(ภาคต่อ แก้ไข อัพเดท) โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax Code PHP select Provicne Umphur District with Edit

PHP CODE FATHER โปรแกรมช่วยสร้างโค้ด โปรเจ็ค PHP+MySQL+Boostrap ใช้งานง่าย ๆ


ตามที่บอกว่าบทความที่แล้วครับ ว่ามีภาคต่อ พอดีช่วงนี้มีอะไรให้ทำนิดหน่อยก็เลยเอามาลงช้าไปนิด แต่ยังไม่ลืมนะครับ คงไม่ต้องพูดพล่ำทำเพลงให้มันยืดยาวนะครับ โค้ดการเลือกจังหวัด อำเภอ และตำบล ในบทความนี้ เป็นการเพิ่มเติมในส่วนของการแก้ไขข้อมูล หรือ การอัพเดทข้อมูล หลังจากที่ได้บันทึกรหัสจังหวัด รหัสอำเภอ และรหัสตำบลไว้แล้ว

ซึ่งจะมีความยุ่งยากอยู่สักหน่อย ในส่วนของโค้ดก็มีเพิ่มเติมในหลาย ๆ ส่วน แต่ก็ไม่ยากจนเกินความสามารถของคนเราครับ หากมีพื้นฐานที่ดี หรือ พรแสวง ก็สามารถต่อยอดได้อย่างแน่นอน
  
if('<?=$action?>'=='Edit'){
window.onLoad=data_show('<?=$province?>','amphur','<?=$amphur?>'); 
window.onLoad=data_show('<?=$amphur?>','district','<?=$district?>'); 
}

สเต็ปการทำงานของโปรแกรมในส่วนของการแก้ไข หรือ อัพเดท
  1. ส่งค่ารหัสจังหวัด เข้าฟังก์ชั่น data_show(); ตอนที่โหลดหน้าเว็บ หรือ เข้าสู่โหมดแก้ไข

    window.onLoad=data_show('<?=$province?>','amphur','<?=$amphur?>'); 

    ก็จะได้อำเภอที่อยู่ในจังหวัดที่ต้องการออกมาครับ
  2. แล้วก็ทำการส่งค่ารหัสอำเภอ เข้าฟังก์ชั่น data_show();

    window.onLoad=data_show('<?=$amphur?>','district','<?=$district?>'); 

    ก็จะได้รายชื่อตำบล ตามอำเภอที่เลือกครับ
  3. จากข้อ 1 และ ข้อ 2 เราก็จะได้รายการจังหวัด อำเภอ ตำบล เรียบร้อย สามารถเลือกใช้ได้ตามปรกติ คือ คลิกเลือกจังหวัด แสดงรายชื่ออำเภอในจังหวัดนั้น คลิกเลือกอำเภอ ก็แสดงรายชื่อตำบลในอำเภอนั้น แต่มันยังไม่สมบูรณ์ เพราะเมื่อเราคลิกเลือกจะแก้ไขจังหวัด แต่เราไม่เลือกอำเภอแล้วล่ะก็ รายชื่อตำบล(อันเก่า) มันก็ยังไม่เปลี่ยนใช่ไหมครับ ถ้าผู้ใช้เลือกจังหวัดใหม่แล้วทำการบันทึกข้อมูลเลย เจ้าชื่อตำบลก็จะผิดอย่างแน่นอน ดังนั้นจึงต้องเพิ่มโค้ดในส่วนของการล้างค่า หรือ Clear List Menu ตำบลออก (ตามรูป) เพื่อให้ผู้ใช้ได้คลิกเลือกอำเภอก่อนบันทึกข้อมูล โค้ดด้านล่างนี้ คือโค้ดในส่วนของ จังหวัด นะครับ

    <select name='province' id='province' onchange="data_show(this.value,'amphur','');document.getElementById('district').innerHTML = '<option value=>--- Pleaser Select Amphur ---</option>';">

    อธิบายเพิ่มเติม คือ โค้ดด้านบนนี้ เป็นการเรียกใช้ฟังก์ชั่นของ Java Script ซ้อนเงื่อนไข หรือ แบบต่อเนื่องนะครับ คือ (โค้ดสีน้ำเงิน ด้านบน) จะเกิดขึ้นเมื่อผู้ใช้คลิกเลือกรายชื่อจังหวัด จะส่งค่ารหัสจังหวัดไป เพื่อเลือกอำเภอนั่นเอง ส่วน (โค้ดสีชมพู) คือ การสร้าง List Menu แบบว่างเปล่าขึ้นมาครับ
บทความนี้ผมก็เอาโค้ดจากบทความที่แล้วนั่นหล่ะครับ มาแก้ไข ในส่วนของโค้ด ทั้งการเพิ่ม และการแก้ไข นั้น เอามาไว้หน้าเดียวกันเลยเพื่อความสะดวกในการดู ในโค้ดผมไม่ได้อธิบายอะไรไว้นะครับ ลองไล่ ๆ โค้ดดูก็จะรู้ว่าอะไรส่งค่าไป ไหน อย่างไร

อธิบายซะยืดยาวไปหน่อย ไม่รู้ว่าอ่านแล้วจะเข้าใจมากขึ้น หรือ ว่าอ่านแล้วจะงงกันไปใหญ่อันนี้ก็ไม่รับประกันใด ๆ นะครับ เอาเป็นว่า โหลดโค้ดที่ทำไว้สำเร็จแล้วไปลองเทสกันดูให้เห็นเลยดีกว่า...

ย้อนกลับ กลับหน้าแรก