Passer la valeur à modal sur le bouton cliquez

Je voulais montrer les détails de ma carte en mode modal lorsque l'utilisateur clique sur le bouton "Plus de détails", j'ai vu une réponse à ce sujet mais je ne veux pas que l'information à être à l'intérieur d'un champ de saisie. Pouvez-vous s'il vous plaît quelqu'un m'aider avec ça?Passer la valeur à modal sur le bouton cliquez

<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>

MODAL

<div id="modalHomeEvents" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header" style="height:50px;"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 
     <div class="modal-body"> 

     <label>Student ID</label>  
     <input type="hidden" name="eventId" id="eventId"/> 
     </div> 
     <div class="modal-footer"> 
      <input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); "> 
      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
     </div> 
     </div> 

    </div> 
    </div>

Javascript

<script type="text/javascript">$(document).on("click", ".open-homeEvents", function() { 
    var eventId = $(this).data('id'); 
    $(".modal-body #eventId").val(eventId); 
});</script>

Source

2017-10-02 geek_10101010

Au lieu d'utiliser un champ de saisie, vous pouvez créer un élément conteneur pour l'ID, un div ou span et contenu mise à jour de l'élément en utilisant .html() jQuery m ethod. Cependant,

$(document).on("click", ".open-homeEvents", function() { 
 
    var eventId = $(this).data('id'); 
 
    $('#idHolder').html(eventId); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Modal</title> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> \t 
 
</head> 
 
<body> 
 
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button> \t 
 
<div id="modalHomeEvents" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header" style="height:50px;"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     </div> 
 
     <div class="modal-body"> 
 

 
     <label>Student ID</label>  
 
     <input type="hidden" name="eventId" id="eventId"/> 
 
     \t <span id="idHolder"></span> \t 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); "> 
 
      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> \t 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

Source

2017-10-02 16:26:55 azs06

le continuait de répéter lorsque vous cliquez sur le bouton –

Vous avez raison, des excuses. Mise à jour ma réponse Si vous n'avez aucun problème à utiliser '.html()' alors cela devrait fonctionner. – azs06

ça marche :) merci –

Passer la valeur à modal sur le bouton cliquez

Répondre

Questions connexes