สร้างแบบฟอร์มกรอกที่อยู่ประเทศไทยแบบอัตโนมัติ ด้วย jquery.Thailand.js

 

การสร้างแบบฟอร์มกรอกที่อยู่ประเทศไทยแบบอัตโนมัติ (เช่น เลือกตำบลแล้วอำเภอและจังหวัดขึ้นเอง) วิธีที่นิยมและเสถียรที่สุดคือการใช้ Library สำเร็จรูป เพราะข้อมูลที่อยู่มีการเปลี่ยนแปลงและมีปริมาณมาก (กว่า 7,000 ตำบล)

วิธีที่ง่ายที่สุดสำหรับนักพัฒนาเว็บคือการใช้ jquery.Thailand.js ครับ

DEMO

1. โครงสร้าง HTML

สร้าง Input สำหรับรองรับข้อมูลที่อยู่ โดยกำหนด id ให้ชัดเจนเพื่อให้ JavaScript ส่งค่าไปเติมได้ถูกช่อง

  <form id="demo1" class="demo" autocomplete="off">
    <h3>1. ที่อยู่บิดา</h3>
    <label>ตำบล / แขวง:</label>
    <input type="text" id="subdistrict-dad" placeholder="ตำบล">
    <label>อำเภอ / เขต:</label>
    <input type="text" id="district-dad" placeholder="อำเภอ">
    <label>จังหวัด:</label>
    <input type="text" id="province-dad" placeholder="จังหวัด">
    <label>รหัสไปรษณีย์:</label>
    <input type="text" id="zipcode-dad" placeholder="รหัสไปรษณีย์">

    <hr>

    <h3>2. ที่อยู่นักเรียน</h3>
    <label>
    <input type="checkbox" id="copy-address"> ใช้ที่อยู่เดียวกับที่อยู่บิดา
    </label>
    <br><br>
    <label>ตำบล / แขวง:</label>
    <input type="text" id="subdistrict-std" placeholder="ตำบล">
    <label>อำเภอ / เขต:</label>
    <input type="text" id="district-std" placeholder="อำเภอ">
    <label>จังหวัด:</label>
    <input type="text" id="province-std" placeholder="จังหวัด">
    <label>รหัสไปรษณีย์:</label>
    <input type="text" id="zipcode-std" placeholder="รหัสไปรษณีย์">
  </form>

    

---

2. การเชื่อมต่อ JavaScript (Library)

คุณต้องเรียกใช้ jQuery และตัวจัดการฐานข้อมูลที่อยู่ (แนะนำของกลุ่มนักพัฒนาชาวไทยที่ Open Source ไว้ครับ)

     
  <!-- jquery library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <!-- jquery.Thailand.js -->
  <link rel="stylesheet"
    href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
  <script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
  <script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/JQL.min.js"></script>
  <script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/typeahead.bundle.js">
  </script>

    

ใส่ Script นี้ไว้ท้ายไฟล์เพื่อเชื่อมโยง Input เข้ากับฐานข้อมูลที่อยู่

     
<script>
    /** ที่อยู่บิดา*/
    $.Thailand({ 
      $district: $('#subdistrict-dad'), // input ของตำบล
      $amphoe: $('#district-dad'), // input ของอำเภอ
      $province: $('#province-dad'), // input ของจังหวัด
      $zipcode: $('#zipcode-dad'), // input ของรหัสไปรษณีย์
      
      // ตั้งค่าเริ่มต้น (Optional)
      autocomplete_size: 10, // จำนวนรายการที่แสดงใน dropdown
      onDataFill: function(data){
          console.log('เลือกข้อมูลเรียบร้อย:', data);
      }
    });
    
    /** ที่อยู่นักเรียน*/
    $.Thailand({ 
      $district: $('#subdistrict-std'), // input ของตำบล
      $amphoe: $('#district-std'), // input ของอำเภอ
      $province: $('#province-std'), // input ของจังหวัด
      $zipcode: $('#zipcode-std'), // input ของรหัสไปรษณีย์
      
      // ตั้งค่าเริ่มต้น (Optional)
      autocomplete_size: 10, // จำนวนรายการที่แสดงใน dropdown
      onDataFill: function(data){
          console.log('เลือกข้อมูลเรียบร้อย:', data);
      }
    });
    
    /** คัดลอกที่อยู่จากชุดที่ 1 ไปชุดที่ 2 */
    $('#copy-address').on('change', function() {
      if (this.checked) {
          // คัดลอกจากชุดที่ 1 ไปชุดที่ 2
          $('#subdistrict-std').val($('#subdistrict-dad').val());
          $('#district-std').val($('#district-dad').val());
          $('#province-std').val($('#province-dad').val());
          $('#zipcode-std').val($('#zipcode-dad').val());
      } else {
          // ล้างค่าชุดที่ 2 ถ้าติ๊กออก
          $('#subdistrict-std, #district-std, #province-std, #zipcode-std').val('');
      }
    });
  </script>

    

---

ทำไมถึงควรใช้วิธีนี้?

• ความเร็ว: ระบบจะค้นหาข้อมูลจากไฟล์ JSON ขนาดเล็ก ทำให้ไม่ต้องโหลดข้อมูลจาก Database ตลอดเวลา
• User Experience: ผู้ใช้งานเพียงแค่พิมพ์คำ 2-3 ตัวแรก ระบบจะขึ้นตัวเลือกให้เลือกทันที (เหมือน Google Search)
• ความถูกต้อง: ลดปัญหาการพิมพ์ชื่อจังหวัดหรืออำเภอผิด ซึ่งมีผลต่อการจัดส่งสินค้า

Download