XAMPP项目中Bootstrap模态框编辑无法读取新值致更新失败

核心问题 #

编辑模态窗口与新增模态窗口的表单元素使用了相同ID（如avime_vismed、avime_data），通过ID选择器取值时，jQuery只会返回页面中第一个匹配该ID的元素值，也就是新增模态窗口的初始值，而非编辑窗口中修改后的新值。

修复步骤 #

1. 给编辑模态窗口的表单元素设置唯一ID #

为编辑窗口内的表单元素添加edit_前缀，确保ID唯一：

<div class="modal fade" id="editVismedModal" tabindex="-1" role="dialog" aria-labelledby="editVismedModalLabel">
    <!-- 其他代码不变 -->
    <div class="modal-body">
        <form id="editVismedForm">
            <input type="hidden" id="edit_avime_anag" name="avime_anag" value="<?php echo $id; ?>">
            <input type="hidden" id="edit_avime_codice" name="avime_codice" value="<?php echo $codice; ?>">
            <div class="form-group">
                <label for="edit_avime_vismed">Visita medica</label>
                <select class="form-control" id="edit_avime_vismed" name="avime_vismed" required>
                    <!-- 原有选项代码不变 -->
                </select>
            </div>
            <div class="form-group">
                <label for="edit_avime_data">Data visita</label>
                <input type="date" class="form-control" id="edit_avime_data" name="avime_data" required>
            </div>
            <!-- 其他代码不变 -->
        </form>
    </div>
    <!-- 其他代码不变 -->
</div>

2. 更新编辑窗口的数据填充逻辑 #

修改AJAX成功回调中的选择器，对应新的ID：

$('#editVismedModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    var avime_codice = button.data('id');
    console.log('codice visita db', avime_codice);
    
    $.ajax({
        url: 'avime_edit_getdata.php',
        type: 'POST',
        data: { id: avime_codice },
        success: function(data) {
            if (data.error) {
                alert(data.error);
            } else {
                console.log('dati:',data);
                var vismed = typeof data === 'string' ? JSON.parse(data) : data;
                
                // 对应新ID填充数据
                $('.modal-body #edit_avime_vismed').val(vismed.avime_vismed);
                $('.modal-body #edit_avime_data').val(vismed.avime_data);
                $('.modal-body #edit_avime_codice').val(avime_codice);
            }
        },
        error: function() {
            alert('Errore durante il caricamento dei dati.');
        }
    });
});

3. 修改saveNewVismed函数的取值逻辑 #

根据操作类型区分读取新增/编辑窗口的元素值：

function saveNewVismed(operation) {
    console.log('entro in conferma');
    // 根据操作类型选择对应前缀
    var prefix = operation === 'edit' ? 'edit_' : '';
    var avime_vismed = document.getElementById(prefix + 'avime_vismed').value;
    var avime_data = document.getElementById(prefix + 'avime_data').value;
    var avime_anag = document.getElementById(prefix + 'avime_anag').value;
    var avime_codice = operation === 'edit' ? document.getElementById(prefix + 'avime_codice').value : null;
    
    console.log('codice', avime_codice);
    console.log('data', avime_data);
    console.log('vismed', avime_vismed);
    
    // 验证逻辑不变
    if (!avime_vismed || !avime_data) {
        $('#resultModalMessage').text('Compila tutti i campi obbligatori.');
        $('#resultModal').modal('show');
        return;
    }
    
    var url = operation === 'edit' ? 'avime_update.php' : 'avime_append.php';
    // AJAX请求逻辑不变
    $.ajax({
        url: url,
        type: 'POST',
        data: {
            avime_codice: avime_codice,
            avime_vismed: avime_vismed,
            avime_data: avime_data,
            avime_anag: avime_anag
        },
        success: function(response) {
            if (response === 'success') {
                var successMessage = operation === 'edit' 
                    ? 'Visita medica aggiornata con successo!' 
                    : 'Visita medica inserita con successo!';
                $('#resultModalMessage').text(successMessage);
                $('#resultModal').modal('show');

                if (operation !== 'edit') {
                    var insertedCodice = response; 
                    console.log('Nuovo codice visita:', insertedCodice);
                    avime_codice = insertedCodice;
                }
                updateVismedTable(avime_anag);
                var modale = operation === 'edit' 
                    ? '#editVismedModal' 
                    : '#newVismedModal';
                $(modale).modal('hide');
            } else {
                $('#resultModalMessage').text('Errore durante l\'inserimento della visita medica: ' + response);
                $('#resultModal').modal('show');
            }
            $('[data-toggle="tooltip"]').tooltip();
        },
        error: function() {
            $('#resultModalMessage').text('Errore di connessione con il server.');
            $('#resultModal').modal('show');
        }
    });
}

4. 同步调整按钮点击日志（可选） #

如果需要保留按钮点击的日志输出，同步修改选择器：

$('#saveVismedButton').on('click', function () {
    var avime_vismed = $('#edit_avime_vismed').val();
    var avime_data = $('#edit_avime_data').val();
    console.log('Vismed click:', avime_vismed);
    console.log('Data click:', avime_data);
});

额外建议 #

• 页面内所有元素ID必须唯一，避免选择器冲突。
• 也可以通过给模态窗口内的表单添加专属类，结合模态窗口上下文取值，比如$('#editVismedModal .avime-input').val()，无需修改ID，灵活性更高。

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