如何在动态表单中关联文本字段？附多目的地输入框代码

嘿，我看你已经搭好了动态添加地址字段的架子，不过代码没写完，我先帮你补全并实现字段关联的核心需求——说白了就是让这些动态生成的输入框能被正确识别成路线的起点、途经点和终点，方便后续处理（不管是提交到后端还是调用地图API）。

先给你一份完整的可运行代码，然后我再拆解关键点：

<!doctype html>
<html>
<head>
    <title>Test</title>
    <style>
        .address-group {
            display: flex;
            gap: 10px;
            margin: 10px 0;
            align-items: center;
        }
        .remove-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        #add-btn {
            background: #0d6efd;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="form">
        <form id="address-form" onsubmit="handleSubmit(event)">
            <p>Route:</p>
            <!-- 起点 -->
            <div class="address-group">
                <input type="text" name="address[]" placeholder="Origin" required>
            </div>
            <!-- 第一个终点/途经点 -->
            <div class="address-group">
                <input type="text" name="address[]" placeholder="Destination" required>
                <button type="button" class="remove-btn" onclick="removeField(this)">×</button>
            </div>
            <button type="button" id="add-btn" onclick="addField()">Add Stop</button>
            <button type="submit" style="margin-left: 10px;">Generate Route</button>
        </form>
    </div>

    <script>
        // 动态添加地址字段
        function addField() {
            const form = document.getElementById('address-form');
            const group = document.createElement('div');
            group.className = 'address-group';
            group.innerHTML = `
                <input type="text" name="address[]" placeholder="Stop" required>
                <button type="button" class="remove-btn" onclick="removeField(this)">×</button>
            `;
            // 插入到添加按钮之前
            document.getElementById('add-btn').before(group);
        }

        // 删除字段
        function removeField(btn) {
            // 至少保留起点和一个终点
            const addressGroups = document.querySelectorAll('.address-group');
            if (addressGroups.length > 2) {
                btn.parentElement.remove();
            } else {
                alert("You need at least an origin and a destination!");
            }
        }

        // 提交时关联所有字段，处理路线逻辑
        function handleSubmit(e) {
            e.preventDefault();
            // 获取所有地址字段的值
            const addressInputs = document.querySelectorAll('input[name="address[]"]');
            const addresses = Array.from(addressInputs).map(input => input.value.trim());
            
            if (addresses.length < 2) {
                alert("Please enter at least an origin and a destination!");
                return;
            }

            // 关联路线：第一个是起点，最后一个是终点，中间的是途经点
            const route = {
                origin: addresses[0],
                waypoints: addresses.slice(1, -1),
                destination: addresses[addresses.length - 1]
            };

            // 这里可以替换成你需要的逻辑：比如调用地图API、提交到后端等
            console.log("Route data:", route);
            alert(`Route created!\nOrigin: ${route.origin}\nWaypoints: ${route.waypoints.join(', ')}\nDestination: ${route.destination}`);
        }
    </script>
</body>
</html>

核心关联逻辑拆解： #

1. 字段命名关联：我给所有输入框用了name="address[]"的命名方式，这样浏览器在表单提交时会自动把所有输入的值打包成一个数组，不用自己一个个去取，非常方便。
2. 路线结构关联：通过位置来定义每个字段的角色——第一个输入框固定是起点，最后一个是终点，中间新增的所有字段都是途经点。这样不管你加多少个中途站点，都能自动和路线的逻辑对应上。
3. 交互防护：加了删除按钮，但限制最少保留2个字段（起点+终点），避免用户误删导致逻辑出错。
4. 提交处理：在handleSubmit函数里把地址数组转换成结构化的路线对象，你可以直接用这个对象去调用地图API生成路线，或者发送到后端存储。

如果你需要实时关联输入（比如验证重复地址、实时预览路线），可以加这段扩展代码：

// 实时检查重复地址
document.addEventListener('input', function(e) {
    if (e.target.name === 'address[]') {
        const value = e.target.value.trim();
        if (!value) return;
        
        const otherInputs = Array.from(document.querySelectorAll('input[name="address[]"]'))
                                .filter(input => input !== e.target);
        
        const isDuplicate = otherInputs.some(input => input.value.trim() === value);
        e.target.style.borderColor = isDuplicate ? 'red' : '';
        if (isDuplicate) alert('This address is already in your route!');
    }
});

直接把这段代码放到<script>标签里就行，能实时提示用户重复的地址。

内容的提问来源于stack exchange，提问作者David Metcalfe