JavaScript中关闭客户编辑模态框后如何清空表单字段？

我在使用模态框内的表单时遇到了问题：客户列表支持编辑客户数据，打开编辑模态框时数据正常显示，但关闭模态框后再打开另一位客户的编辑模态框，修改并保存新客户数据时，该数据会覆盖第一位客户的数据，仿佛第一个模态框仍处于活跃状态只是被隐藏了。我希望关闭模态框时清空其所有字段，避免数据覆盖。

以下是我编写的两个函数：

function detalhesCliente(clienteId) {
    const url = '/editar/' + clienteId + '/';
    const init = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRFToken': getCookie('csrftoken'),
        },
    };
    fetch(url, init)
        .then(response => response.json())
        .then(cliente => {
        
            document.getElementById('modalNome').value = cliente.cliente.nome;
            document.getElementById('modalEmail').value = cliente.cliente.email;
            document.getElementById('modalCpf').value = cliente.cliente.cpf;
            document.getElementById('modalTelefone').value = cliente.cliente.telefone;
            document.getElementById('modalEndereco').value = cliente.cliente.endereco;

            
            const veiculosBody = document.getElementById('modalVeiculosBody');
            veiculosBody.innerHTML = '';
            
                cliente.cliente.veiculos.forEach(veiculo => {
                    const row = document.createElement('tr');                    
                    row.innerHTML = `
                        <td><input class="modelo form-control inputs" value=${veiculo.modelo}></td>
                        <td><input class="marca form-control inputs" value=${veiculo.marca}></td>
                        <td><input class="placa form-control inputs" value=${veiculo.placa}></td>
                        <td><input class="ano form-control inputs" value=${veiculo.ano}></td>
                        <td><input class="cor form-control inputs" value=${veiculo.cor}></td>
                        <td><input class="km form-control inputs" value=${veiculo.km}></td>
                        
                    `;
                    
                    veiculosBody.appendChild(row);
                });

                $('#clienteModal').on('hidden.bs.modal', function (e) {
                    document.getElementById('cliente').reset();
                });

                document.getElementById('btnSalvar').addEventListener('click', function() {
                   
                    salvarEdicoesCliente(clienteId);
                    $('#clienteModal').modal('hide');                 
                    
                }); 

            $('#clienteModal').modal('show');
        })
        .catch(error => {
            console.error('Erro ao buscar detalhes do cliente:', error);
            
        });
}

function salvarEdicoesCliente(clienteId) {
    const nome = document.getElementById('modalNome').value;    
    const email = document.getElementById('modalEmail').value;    
    const cpf = document.getElementById('modalCpf').value;    
    const telefone = document.getElementById('modalTelefone').value;    
    const endereco = document.getElementById('modalEndereco').value;    


    const veiculos = []
    const veiculosRows = document.querySelectorAll('#modalVeiculosBody tr');
    veiculosRows.forEach(row => {
        const modelo = row.querySelector('.modelo').value;
        const marca = row.querySelector('.marca').value;
        const placa = row.querySelector('.placa').value;
        const ano = row.querySelector('.ano').value;
        const cor = row.querySelector('.cor').value;
        const km = row.querySelector('.km').value;

        veiculos.push({modelo, marca, placa, ano, cor, km});
    });    

    const dadosCliente = {
        nome: nome,
        email: email,
        cpf: cpf,
        telefone: telefone,
        endereco: endereco,
        veiculos: veiculos
    };
  
    fetch('/editar/' + clienteId + '/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify(dadosCliente)
    })
    .then(response => {
        if (response.ok) {
            console.log('Dados do cliente atualizados com sucesso.');           

            clientes();            
            
        } else {
            return response.json(); 
    })
    .then(data => {
        if (data && data.error) {
            // Exibe a mensagem de erro retornada pelo servidor no modal
            document.getElementById('mensagemErro').innerText = data.error;
            document.getElementById('mensagemErro').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Erro ao enviar requisição:', error);
    });
}

问题根源 #

1. 重复绑定事件：每次调用detalhesCliente时，都会给#btnSalvar和模态框隐藏事件添加新的监听器，导致多次触发逻辑，且最后绑定的clienteId会覆盖之前的，造成保存时用错ID。
2. 表单重置不彻底：document.getElementById('cliente').reset()只能重置原生表单控件，动态生成的车辆行不会被清空，残留数据会干扰下一次编辑。
3. 语法错误：salvarEdicoesCliente函数中then块缺少闭合大括号，可能导致逻辑异常。

修复方案 #

1. 一次性绑定事件，避免重复绑定 #

将事件绑定移到页面加载完成后执行，只绑定一次：

document.addEventListener('DOMContentLoaded', function() {
    // 模态框隐藏时彻底重置内容
    $('#clienteModal').on('hidden.bs.modal', function (e) {
        // 重置原生表单
        document.getElementById('cliente').reset();
        // 清空动态生成的车辆行
        document.getElementById('modalVeiculosBody').innerHTML = '';
        // 隐藏错误提示
        document.getElementById('mensagemErro').style.display = 'none';
    });

    // 保存按钮点击事件，从模态框获取当前编辑的客户ID
    document.getElementById('btnSalvar').addEventListener('click', function() {
        const clienteId = $('#clienteModal').data('cliente-id');
        salvarEdicoesCliente(clienteId);
        $('#clienteModal').modal('hide');
    });
});

2. 修改detalhesCliente函数，存储当前客户ID #

在填充数据时，把当前编辑的clienteId存在模态框的data属性中，避免ID被覆盖：

function detalhesCliente(clienteId) {
    const url = '/editar/' + clienteId + '/';
    const init = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRFToken': getCookie('csrftoken'),
        },
    };
    fetch(url, init)
        .then(response => response.json())
        .then(cliente => {
            // 填充客户基本信息
            document.getElementById('modalNome').value = cliente.cliente.nome;
            document.getElementById('modalEmail').value = cliente.cliente.email;
            document.getElementById('modalCpf').value = cliente.cliente.cpf;
            document.getElementById('modalTelefone').value = cliente.cliente.telefone;
            document.getElementById('modalEndereco').value = cliente.cliente.endereco;

            // 清空并填充车辆信息
            const veiculosBody = document.getElementById('modalVeiculosBody');
            veiculosBody.innerHTML = '';
            
            cliente.cliente.veiculos.forEach(veiculo => {
                const row = document.createElement('tr');                    
                row.innerHTML = `
                    <td><input class="modelo form-control inputs" value="${veiculo.modelo}"></td>
                    <td><input class="marca form-control inputs" value="${veiculo.marca}"></td>
                    <td><input class="placa form-control inputs" value="${veiculo.placa}"></td>
                    <td><input class="ano form-control inputs" value="${veiculo.ano}"></td>
                    <td><input class="cor form-control inputs" value="${veiculo.cor}"></td>
                    <td><input class="km form-control inputs" value="${veiculo.km}"></td>
                `;
                veiculosBody.appendChild(row);
            });

            // 存储当前编辑的客户ID到模态框
            $('#clienteModal').data('cliente-id', clienteId);

            // 显示模态框
            $('#clienteModal').modal('show');
        })
        .catch(error => {
            console.error('Erro ao buscar detalhes do cliente:', error);
        });
}

3. 修复salvarEdicoesCliente的语法错误 #

补充缺失的闭合大括号，确保逻辑正常执行：

function salvarEdicoesCliente(clienteId) {
    const nome = document.getElementById('modalNome').value;    
    const email = document.getElementById('modalEmail').value;    
    const cpf = document.getElementById('modalCpf').value;    
    const telefone = document.getElementById('modalTelefone').value;    
    const endereco = document.getElementById('modalEndereco').value;    

    const veiculos = []
    const veiculosRows = document.querySelectorAll('#modalVeiculosBody tr');
    veiculosRows.forEach(row => {
        const modelo = row.querySelector('.modelo').value;
        const marca = row.querySelector('.marca').value;
        const placa = row.querySelector('.placa').value;
        const ano = row.querySelector('.ano').value;
        const cor = row.querySelector('.cor').value;
        const km = row.querySelector('.km').value;

        veiculos.push({modelo, marca, placa, ano, cor, km});
    });    

    const dadosCliente = {
        nome: nome,
        email: email,
        cpf: cpf,
        telefone: telefone,
        endereco: endereco,
        veiculos: veiculos
    };
  
    fetch('/editar/' + clienteId + '/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify(dadosCliente)
    })
    .then(response => {
        if (response.ok) {
            console.log('Dados do cliente atualizados com sucesso.');           
            clientes();            
        } else {
            return response.json(); 
        } // 补充缺失的闭合大括号
    })
    .then(data => {
        if (data && data.error) {
            document.getElementById('mensagemErro').innerText = data.error;
            document.getElementById('mensagemErro').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Erro ao enviar requisição:', error);
    });
}

内容的提问来源于stack exchange，提问作者Jonatas Pereira