javascript関数のブートストラップモーダルに渡されるパラメータを取得する方法

Question

モーダルでボタンをクリックすると、パラメータを取得します。

<div class="modal hide fade" id="resetPasswdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel1">reset</h3> 
    </div> 
    <div class="modal-body"> 
    <input id="Password1" type="password" /> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">cancel</button> 
    <button class="btn btn-danger" data-dismiss="modal" onclick="resetPasswd()">confirm</button> 
    </div> 
</div> 

モーダルがによってトリガーされます。私はモーダルにconfirmをクリックすると

<a href="#resetPasswdModal" data-toggle="modal" data-id="111" class="btn">reset</a> 

、私はdata-idの値を取得したいです。これは私がやった方法です：

<script type="text/javascript"> 
    function resetPasswd() { 
    var UserID = $('#resetPasswdModal').data('id'); 
    } 
</script> 

その後ユーザーIDはundefinedに設定されています。私はまた、あなたが確認するためにクラスを追加することをおすすめします

<div class="modal hide fade" id="resetPasswdModal" data-id="111" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

：どのように私はあなたがあなたのdiv要素ではなく、あなたのリンクにデータ-id属性を追加する必要がjavascript

Answer 1

でdata-*を得ることができる

onclickのボタンではなく、使用します。

<button class="btn btn-danger" data-dismiss="modal" id="confirm">confirm</button> 

次に、あなたがそうのような値にアクセスすることができます。

$(document).ready(function() { 
    $('#confirm').click(function() { 
     var UserID = $('#resetPasswdModal').attr('data-id'); 
    }); 
}); 

Answer 2

あなたは間違った要素をチェックしていますので、UserIDを取得していません。次の要素（resetPasswdModal）には、属性data-idがありません。

<div class="modal hide fade" 
    id="resetPasswdModal" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="myModalLabel" 
    aria-hidden="true"> 

data-id属性は、モーダルを開始するアンカータグに関連付けられています。この状況で

<a href="#resetPasswdModal" 
    data-toggle="modal" 
    data-id="111" 
    class="btn">reset</a> 

、あなたはaタグをクリックするだけでUserIDを設定し、クリックを取り消すにリセットすることができます。次のようなフィドルでも同じことが示されています。

JSFiddle

Answer 3

コードの下に使用し、uが `resetPasswdModal`にはないので、あなたは多くの形態

function ShowModal() 
 
     { 
 

 

 
      $("#resetPasswdModal").modal("show") 
 
      $("#resetPasswdModal").on('shown.bs.modal', function (e) 
 
      { 
 
       var mypostid = $("#myid").data('id'); 
 
       $(".modal-dialog #idtest").val(mypostid); 
 
      }); 
 

 

 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<a href="#" data-toggle="modal" id="myid" data-id="111" class="btn" onclick="ShowModal();">reset</a> 
 

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

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <input id="Password1" type="password" /> 
 
    <input type="text" id="idtest"/> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn" data-dismiss="modal" aria-hidden="true">cancel</button> 
 
    <button class="btn btn-danger" data-dismiss="modal" onclick="resetPasswd()">confirm</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>