html - Pass value of different fields into modal forms - Stack Overflow

admin管理员组

文章数量:1320661

I have a project based on xampp, using html, javascript, jquery and bootstrap.
I've already done the edit window of my project.
I have a series of tabs that contains differents data.
In one of these tabs i have a table which shows the medical visits of an employee.

In the table i can add, edit or delete a record.
I'm already in an edit window, so i decide to allow data input through modal windows.

For the "new" function button of the table a have no problem, same for delete.
When i want to perform an edit operation, by clicking the edit button the program open the modal window with fields value set with db data.
When i try to modify some of these values, setting new value and clicking "confirm" button for save data, the function can't read the new data but keeps the old db data, and my update query fails

This is my table

<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>

This is the modal window where i want to show data

<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>

This is jquery code for data management

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);
        });

本文标签： htmlPass value of different fields into modal formsStack Overflow