ボタンをクリックしてモーダルに値を渡す

ユーザーがボタン「詳細」をクリックすると、私のカードの詳細をモーダルで表示したいと思っていましたが、これに関する情報を見たことがあります。入力フィールドの中にあります。誰かが私を助けてくれますか？ボタンをクリックしてモーダルに値を渡す

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

出典

2017-10-02 geek_10101010

代わりの入力フィールドを使用して、あなたは、divまたはspanをidのコンテナ要素を作成し、コンテンツを更新することができ要素の使用.html() jQuery m民法。

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

出典

2017-10-02 16:26:55 azs06

しかし、はあなたが正しいです –

ボタン、謝罪をクリックすると、繰り返し続けました。私の答えを更新しました。 '.html（）'を使っても問題がなければ、これはうまくいくはずです。 – azs06

それは動作します:)あなたに感謝 –

ボタンをクリックしてモーダルに値を渡す

答えて

関連する問題