2016-04-23 46 views
0

我想在單擊模式上的按鈕時獲取參數。如何獲取傳遞給javascript函數中的引導模式的參數

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

模態被觸發:

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

當我點擊confirm模態,我想要得到的data-id值。這是我如何做:

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

然後用戶名設置爲undefined

我怎麼能拿data-*javascript

+0

使用,因爲'resetPasswdModal'不有任何屬性'data-id'。你也可以參考以下文章[data- *](http://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery) – Rajesh

+0

你可以使用一個隱藏字段的名稱身份證在模型形式,並從中獲得價值。 –

+0

我認爲你必須切換模式「手動」看看這個帖子http://stackoverflow.com/questions/10379624/how-to-pass-values-arguments-to-modal-show-function-in- bootstrap – rick

回答

0

您需要將數據-id屬性添加到您的DIV,不是你的鏈接:

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

我還建議你添加一個類你確認按鈕,而不是使用的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'); 
    }); 
}); 
0

您正在檢查錯誤的元素,因此您沒有獲得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

0

使用和U將得到價值數據-ID模型同樣的技術在裏面可以以多種形式

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>

相關問題