首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用启动按钮在模态窗口中设置textbox值

使用启动按钮在模态窗口中设置textbox值
EN

Stack Overflow用户
提问于 2015-08-14 07:12:18
回答 2查看 12.7K关注 0票数 0

我试图使用onclick按钮在模态文本框中显示用户名,我在onclick上有一个按钮,我正在调用onclick="getUserName(this.id)"

代码语言:javascript
复制
this.id 

告诉我我想要的名字

代码语言:javascript
复制
modal textbox userName

,这是我的函数

代码语言:javascript
复制
function getUserName(username) {
      $('#editUserPopUp').bind('show',function(){
          alert(username);
          $("#userName").val(username);
      });
 }

我在alert(username)中获取用户名,但如何将该值设置为我的模式用户名文本字段

,这是我的Modal

代码语言:javascript
复制
<div class="modal fade" id=editUserPopUp tabindex="-1" 
    role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Update Password</h4>
        </div>
        <div class="modal-body">                                                                                    
        <form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
          <div class="input-group col-md-8">
           <span class="input-group-addon">User Name</span>
             <input class="form-control" id="userName" type="text" class="input-medium" disabled />
          </div>           
        </form> 
       </div>   
    </div>
  </div>
</div> 
EN

回答 2

Stack Overflow用户

发布于 2015-08-14 07:54:35

这应该能行。

但是,您还应该查看有关模态窗口的Bootstrap文档。有一节解释了如何改变情态内容。

Varying modal content based on trigger button

使用event.relatedTarget和HTML *属性(可能通过jQuery)根据单击哪个按钮改变模式的内容。

代码语言:javascript
复制
function getUserName(username) {
  var $modal = $('#editUserPopUp'),
      $userName = $modal.find('#userName');
  $userName.val(username);
  $modal.modal("show");
}
代码语言:javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<button onclick="getUserName(this.id)" id="Foo Bar">Open Modal</button>

<div class="modal fade" id=editUserPopUp tabindex="-1" 
    role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Update Password</h4>
        </div>
        <div class="modal-body">                                                                                    
        <form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
          <div class="input-group col-md-8">
           <span class="input-group-addon">User Name</span>
             <input class="form-control" id="userName" type="text" class="input-medium" disabled />
          </div>           
        </form> 
       </div>   
    </div>
  </div>
</div>

票数 3
EN

Stack Overflow用户

发布于 2015-08-14 07:25:37

我认为问题在于您使用的是show事件,而是尝试调用shown事件,如下所示:

代码语言:javascript
复制
function getUserName(username) {
  $('#editUserPopUp').modal('show');

  $('#editUserPopUp').on('shown', function () {
    alert(username);
    $("#userName").val(username);
  })

}

p/s :没有测试。希望能帮上忙。如果不起作用,请发表评论。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32004291

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档