Auto-fill ฟิลด์ให้เหมือนอีกฟิลด์หนึ่งใน JavaScript

ฟีเจอร์ "Same as above" (เหมือนข้างบน) พบได้บ่อยในฟอร์มที่มีที่อยู่ Bill-to / Ship-to ให้ผู้ใช้กรอกที่อยู่ครั้งเดียวแล้วกดปุ่มคัดลอกไปอีกช่อง

ตัวอย่าง: คัดลอกค่าจาก Input แรกไป Input ที่สอง

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto-fill Field</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        input { padding: 10px; margin: 10px 0; display: block; width: 100%; max-width: 400px; box-sizing: border-box; }
        button { padding: 10px 20px; cursor: pointer; background: #28a745; color: white; border: none; border-radius: 4px; }
        button:hover { background: #218838; }
    </style>
</head>
<body>
    <h1>Auto-fill: คัดลอกค่าจากฟิลด์แรกไปฟิลด์ที่สอง</h1>
    <label>ที่อยู่แรก: <input type="text" class="addr" placeholder="กรอกที่อยู่ที่นี่"></label>
    <button class="Btn">คัดลอกเหมือนข้างบน (Same as above) </button>
    <label>ที่อยู่ที่สอง: <input type="text" class="addr" placeholder="จะถูกเติมอัตโนมัติ"></label>

    <script>
        let BtnEle = document.querySelector(".Btn");
        let addrEle = document.querySelectorAll(".addr");
        
        BtnEle.addEventListener("click", () => {
            // คัดลอกค่าจาก input ตัวแรก [0] ไปตัวที่สอง [1]
            addrEle[1].value = addrEle[0].value;
        });
    </script>
</body>
</html>

ผลลัพธ์

1. กรอกที่อยู่ในช่องแรก: "123 ถนนสุขุมวิท กรุงเทพฯ"
2. กดปุ่ม "คัดลอกเหมือนข้างบน"
3. ช่องที่สองจะมีค่า: "123 ถนนสุขุมวิท กรุงเทพฯ" อัตโนมัติ

ปรับปรุง: Auto-sync แบบ Real-time (ไม่ต้องกดปุ่ม)

<script>
    let addrEle = document.querySelectorAll(".addr");
    let syncCheckbox = document.getElementById("syncCheckbox");
    
    // ฟังการเปลี่ยนแปลงที่ Input ตัวแรก
    addrEle[0].addEventListener("input", () => {
        if (syncCheckbox.checked) {
            addrEle[1].value = addrEle[0].value;
        }
    });
</script>

<!-- เพิ่ม Checkbox ควบคุม -->
<label><input type="checkbox" id="syncCheckbox" checked> ซิงค์อัตโนมัติ</label>

ขยาย: คัดลอกหลายฟิลด์พร้อมกัน (Address Form)

<script>
    const fields = ["firstName", "lastName", "address", "city", "state", "zip", "country"];
    
    function copyBillingToShipping() {
        fields.forEach(field => {
            const source = document.getElementById(`billing_${field}`);
            const target = document.getElementById(`shipping_${field}`);
            if (source && target) target.value = source.value;
        });
    }
    
    // หรือใช้ Object.assign สำหรับ FormData
    function copyFormData(sourceForm, targetForm) {
        const data = new FormData(sourceForm);
        for (let [key, value] of data) {
            if (targetForm.elements[key]) {
                targetForm.elements[key].value = value;
            }
        }
    }
</script>

Accessibility Tips

• เพิ่ม aria-label="Copy billing address to shipping" ให้ปุ่ม
• แสดงสถานะ: "คัดลอกแล้ว" / "ซิงค์อัตโนมัติเปิดอยู่"
• อนุญาตให้แก้ไขช่องที่สองได้ (ไม่ readonly) เพราะอาจต้องแก้ไขเล็กน้อย