2016-04-23 28 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>

相关问题