将不同字段的值传递到模态表单中

Question

我有一个基于xampp的项目，使用html、javascript、jquery和bootstrap。
我已经完成了项目的编辑窗口。
我有一系列包含不同数据的选项卡。
在其中一个选项卡中，我有一张表格，显示员工的医疗就诊情况。

在表中我可以添加、编辑或删除记录。
我已经在编辑窗口中，所以我决定允许通过模态窗口输入数据。

表a的“新建”功能按钮没有问题，删除也一样。
当我想执行编辑操作时，通过单击编辑按钮，程序打开模式窗口，其中字段值设置为数据库数据。
当我尝试修改其中一些值、设置新值并单击“确认”按钮保存数据时，该函数无法读取新数据，但保留旧的数据库数据，并且我的更新查询失败

这是我的桌子

<div class="tab-pane fade" id="vismed" role="tabpanel" aria-labelledby="vismed-tab">
  <table class="table vismed table-striped" id="vismedTable">
    <thead>
      <tr>
        <th>Descrizione</th>
        <th>Data visita</th>
        <th>Prossima visita</th>
        <th class="text-center">
            <button type="button" class="btn btn-new-vismed" 
                    data-toggle="modal" data-target="#newVismedModal">
              <i class="fas fa-plus"></i> Nuovo
            </button>
        </th>
      </tr>
    </thead>
    <tbody id="vismedTableBody">
<?php while($row = $avismed->fetch_assoc()): ?>
      <tr>
        <td><?php echo htmlspecialchars($row["avime_des"]); ?></td>
        <td>
          <?php 
            if (!empty($row["avime_data"])) {
              echo date('d/m/Y', strtotime($row["avime_data"]));
            } 
            else {
              echo '';                                            
            }
          ?>
        </td>
        <td>
          <?php 
            if (!empty($row["avime_nextdata"])) {
              echo date('d/m/Y', strtotime($row["avime_nextdata"]));
            } 
            else {
              echo '';
            }
          ?>
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-primary btn-action" data-toggle="modal" data-target="#editVismedModal" data-id="<?php echo $row['avime_codice']; ?>">
              Modifica
          </button>
          <button type="button" class="btn btn-cancel btn-action"
                  onclick="deleteVismed(<?php echo $row['avime_codice']; ?>)">
            Elimina
          </button>
        </td>
      </tr>
<?php endwhile; ?>
    </tbody>
  </table>   
</div>

这是我想显示数据的模态窗口

<div class="modal fade" id="editVismedModal" tabindex="-1" role="dialog" aria-labelledby="editVismedModalLabel">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editVismedModalLabel">Modifica visita medica</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <?php 
                $look_avismed=$user['avime_vismed'] ?? '';
                $codice=$user['avime_codice'] ?? '';
                ?>
                <div class="modal-body">
                    <form id="editVismedForm">
                        <input type="hidden" id="avime_anag" name="avime_anag" value="<?php echo $id; ?>">
                        <input type="hidden" id="avime_codice" name="avime_codice" value="<?php echo $codice; ?>">
                        <div class="form-group">
                            <label for="avime_vismed">Visita medica</label>
                            <select class="form-control" id="avime_vismed" name="avime_vismed" required>
                                <option value="" selected> </option>
                                <?php
                                if ($vismed->num_rows > 0) {
                                    $vismed->data_seek(0);
                                    while ($rigap = $vismed->fetch_assoc()) {
                                        $selected = ($rigap['vime_codice'] == $look_avismed) ? 'selected' : '';
                                        echo "<option value='" . $rigap['vime_codice'] . "' $selected>" . $rigap['vime_des'] . "</option>";
                                    }
                                } else {
                                    echo "<option value=''>Nessuna visita medica disponibile</option>";
                                }
                                ?>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="avime_data">Data visita</label>
                            <input type="date" class="form-control" id="avime_data" name="avime_data" required>
                        </div>
                        <div class="form-group">
                            <label >Esito visita</label> <!--  for="avime_nextdata"-->
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveVismedButton" onclick="saveNewVismed('edit')">Conferma</button>
                    <button type="button" class="btn btn-cancel" data-dismiss="modal">Annulla</button>
                </div>
            </div>
        </div>
    </div>

这是用于数据管理的jquery代码

function saveNewVismed(operation) {
            // Raccogli i valori dal form
            console.log('entro in conferma');
            var avime_vismed = operation === 'append' ? document.getElementById('avime_vismed').value : $('#avime_vismed').val();
            var avime_data = operation === 'append' ? document.getElementById('avime_data').value : $('#avime_data').val();
            var avime_anag = document.getElementById('avime_anag').value;
            var avime_codice = operation === 'edit' ? document.getElementById('avime_codice').value : null;
            console.log('codice', avime_codice);
            console.log('data', avime_data);
            console.log('vismed', avime_vismed);
            
            // Verifica che i campi richiesti siano compilati
            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';
            // Invia i dati al server tramite AJAX
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    avime_codice: avime_codice,
                    avime_vismed: avime_vismed,
                    avime_data: avime_data,
                    avime_anag: avime_anag
                    //avime_nextdata: avime_nextdata
                },
                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');
                }
            });
        }

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

        // edit vismed
        $('#editVismedModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var avime_codice = button.data('id');
            console.log('codice visita db', avime_codice);
            $(this).modal('show');
        
            // Esegui una chiamata AJAX per ottenere i dati
            $.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;
                        
                        // Associa i dati ai campi della modale
                        $('.modal-body #avime_vismed').val(vismed.avime_vismed);
                        $('.modal-body #avime_data').val(vismed.avime_data);
                        $('.modal-body #avime_codice').val(avime_codice);
                    }
                },
                error: function() {
                    alert('Errore durante il caricamento dei dati.');
                }
            });
        });

        function updateVismedTable(avime_anag) {
            $.ajax({
                url: 'avime_get.php',
                type: 'GET',
                data: {
                    avime_anag: avime_anag
                },
                success: function(response) {
                    $('#vismedTableBody').html(response);
                    $('[data-toggle="tooltip"]').tooltip();
                },
                error: function() {
                    $('#resultModalMessage').text('Errore durante l\'aggiornamento della tabella.');
                    $('#resultModal').modal('show');
                }
            });
        }

        $('#vismedTableBody').on('click', '.btn-cancel', function() {
            var avime_codice = $(this).data('id');
            deleteVismed(avime_codice);
        });

Answer 1

我已经尝试了两种解决方案，关闭时重置表单并仅使用一种方法来获取值，但仍然不起作用。 我真的不知道...