Passare variabile a pulsante in finestra modale

[Francesco75]

Buongiorno a tutti.
Mi sto cimentando con un gestionale web e non riesco a realizzare una cosa che sicuramente è banale ma non essendo affatto esperto di questi linguaggi mi viene difficile farlo.
Ho certcato anche in altre discussioni simili ma non riesco a realizzare quanto devo.
In pratica ho una tabella che popolo con i dati di un database. Per ogni riga oltre a inserire i dati inserisco 3 pulsati che fanno edit, dettaglio ed elimina e contengono l'id della riga. Il tutto funziona bene vorrei però inserire alla pressione del pulsante elimina una finestra modale che mi chieda se voglio effettivamente cancellare il record anzicchè eliminarlo direttamente (l'eliminazione diretta già funziona) in pratica il pulsante elimina ha un href che contiene l'id da eliminare il mio problema è passare questo id al pulsante di conferma della finestra modale.

<!-- questa è il pulsante elimina che contiene in href l'azione da compiere sull'id cliccato -->
<a class="btn btn-danger btn-circle btn-sm"
          href="?azione=elimina&id='.$row['id'].'
          " data-toggle="modal" data-target="#eliminaModal">
         <i class="fas fa-trash" aria-hidden="true"></i></a>

<!-- questa è la finestra modale alla quale devo passare azione e id della riga da eliminare -->
<div class="modal fade" id="eliminaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title" id="exampleModalLabel">Vuoi davvero eliminare questo record?</h5>
                         <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">×</span>
                         </button>
                     </div>
                     <div class="modal-body">Seleziona "Procedi" se vuoi eliminare il record</div>
                     <div class="modal-footer">
                     <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancella</button>
                     <a class="btn btn-primary" href="?azione=elimina&id='.$id.'">Procedi</a>
                     </div>
                 </div>
             </div>
         </div>

Come posso passare all'href del bottone "Procedi" la stringa "?azione=elimina&id='.$id.'" con id corrispondente ? o solo meglio come posso valorizzare con l'id corretto la variabile $id che compelta l'href del bottone in questione?

Spero di essere stato chiaro nella mia ingarbugliata spiegazione e un grazie a chi vorrà aiutarmi.

 

[Tommy03]

Aspetta... Da quel che vedo stai usando un link (che punta alla stessa pagina, giusto?), quindi la pagina si ricarica prima di vedere il modale, giusto? Se è cosi, dovresti usare JavaScript, in modo da schiacciare il primo bottone Elimina e far comparire il modale direttamente, senza che la pagina ricarichi

 

[Francesco75]

Buongiorno e grazie, Tommy per il suggerimento. Dopo aver letto la tua risposta ho cercato con varie prove e ricerce sul web per risolvere questo mio problema. Tuttavia ogni ricerca forniva risposte incomplete, almeno per me che non sono un esperto programmatore. Alla fine ho trovato una soluzione e la illustro per chi come me dovesse avere la stessa necessità.

<!-- Pulsante che richiama uno javascript, che riporterò alla fine e che passa allo stesso l'id della riga da cancellare -->
<!-- In pratica per ogni riga della mia tabella creo un pulsante che memorizza l'id della riga stessa -->
<a class="elimina" data-id="'.$row['id'].'"><span class="btn btn-danger btn-circle btn-sm"><i class="fas fa-trash" aria-hidden="true"></i></span></a>

<!-- Questa è la finestra modale, ho dato al pulsante "Procedi" un id per poter riconoscerne il click e attivare le azioni corrispondenti -->
<div class="modal fade" id="eliminaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Vuoi davvero eliminare questo record?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Seleziona "Procedi" se vuoi eliminare il record</div>
            <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancella</button>
            <a class="btn btn-primary" id="procedi">Procedi</a>
            </div>
        </div>
    </div>
</div>

<!-- Alla fine del file richiamo lo javascript che ho inserito in un percorso specifico -->
    <!-- Pagina scripts personali -->
    <script src="js/personali/elimina.js"></script>

/*Questo è il javascript che viene richiamato dall'evento click sul pulsante "cestino"
  che compare ad ogni riga della tabella, preleva l'id della riga stessa (memorizzata in precedenza)
*/
$(document).ready(function(){
  $('.elimina').on('click',function()
  {         
    var id=$(this).data('id');
    
    //apre la finestra modale che ho chiamato eliminaModal
    $('#eliminaModal').modal('show');
    
    //se viene premuto il tasto che ho identificato con id procedi parte l'azione di eliminazione della riga
    $("#procedi").click(function(e) {
      location.href='?azione=elimina&id='+id;
      
    //chiude la finestra modale 
      $('#eliminaModal').modal('hide');
     })
  })
});

Questo è quanto forse poteva realizzarsi in una maniera migliore ma da inesperto questa è la mia soluzione e spero possa essere di aiuto a qualcuno.