Bootstrap Modal: trasferisce i dati in modal utilizzando Javascript

Question

Voglio passare i dati select/dropdown nel modal bootstrap con l'uso di java-script. Sto usando il modale come messaggio di conferma.

mio Select/Drop-down è,

<select class="form-control" id="project" name="project_id"> 
    <option value="1"> ABCD </option> 
    <option value="2"> EFGH </option> 
    <option value="3"> IJKL </option> 
    <option selected="selected" value="#">Please Select</option> 
</select> 

e sto chiamando il Bootstrap modale utilizzando JavaScript come sotto,

$('#project').change(function(){ 
    var e  = document.getElementById("project"); 
    var p_id = e.options[e.selectedIndex].value; 
    var p_name = e.options[e.selectedIndex].text; 

    $('#myModal').modal('show'); 
}); 

Il Bootstrap modale è come sotto,

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"></h4> 
     </div> 
     <div class="modal-body modal-mt-hgt"> 
     <form action="" method="post"> 
      <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p> 
      Enter Your Comment : <textarea rows="3"></textarea> 
      <input type="hidden" name="country" value=""> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add Task</button> 
     </div> 
     <?= form_close(); ?> 
    </div> 
    </div> 
</div> 

Quello che voglio fare è passare/mostrare var p_id nel hi campo dden e spettacolo var p_name nel lato <b id="p_name"></b> del modale.

Ulteriori p_id, p_name può ottenere quando l'utente seleziona un'opzione da Select/discesa utilizzando la funzione JavaScript sopra e L'unica cosa che devo fare è come mostrare Nome del progetto sulla modale e assegnare p_id nel campo nascosto delle modale

migliori saluti

Answer 1

sono abbastanza nuovo a tutto questo quindi questo probabilmente non è la soluzione migliore, ma è una soluzione.

$('#project').on('change', function() { 
    var p_id = $(this).val(); 
    var p_name = $(this).find(':selected').text(); 

    $('#myModal').on('show.bs.modal', function() 
    { 
     $(this).find('#p_name').text(p_name); 
     $(this).find('#p_id').val(p_id); 
    }); 

    $('#myModal').modal('show'); 
}); 

È necessario aggiungere una classe o un ID al campo nascosto in modo che possa essere identificato. Sopra ho dato un ID di p_id.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"></h4> 
     </div> 
     <div class="modal-body modal-mt-hgt"> 
     <form action="" method="post"> 
      <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p> 
      Enter Your Comment : <textarea rows="3"></textarea> 
      <input type="hidden" id="p_id" name="country" value=""> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add Task</button> 
     </div> 
     <?= form_close(); ?> 
    </div> 
    </div> 
</div> 

penso che sia tutto autoesplicativo, ma se non, aggiungere il controllo per vedere se i cambiamenti a discesa del progetto, abbiamo quindi assegnare il valore e il testo della voce selezionata utilizzando il $ (this) variabile per affermare che è all'interno dell'ID a discesa #project.

Successivamente, aggiungiamo un listener per vedere quando viene visualizzata la modale, da cui possiamo quindi manipolare il modale come vogliamo. In questo esempio impostiamo il testo p_name e impostiamo il valore di p_id.