[英]Setting textbox value in modal window using onclick button using Bootstrap
I ma trying to display username in modal text box using onclick button I have a button from there on onclick
i am calling onclick="getUserName(this.id)"
我试图使用onclick按钮在模式文本框中显示用户名,我在
onclick
上有一个按钮,我正在调用onclick="getUserName(this.id)"
this.id
gives me name which i want to set in 给我我想设置的名字
modal textbox userName
Here is my function 这是我的功能
function getUserName(username) {
$('#editUserPopUp').bind('show',function(){
alert(username);
$("#userName").val(username);
});
}
I am getting username in alert(username)
but how do i set thsi value to my modal, username text field 我在
alert(username)
获取用户名,但是如何将其值设置为我的模态,用户名文本字段
Here is my Modal 这是我的模态
<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>
This should work. 这应该工作。
But you should also take a look at the Bootstrap documentation about modal windows. 但是,您还应该查看有关模态窗口的Bootstrap文档。 There is a section explaining how to vary modal content.
有一节说明如何更改模式内容。
Varying modal content based on trigger button 根据触发按钮改变模式内容
Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
使用event.relatedTarget和HTML data- *属性(可能通过jQuery)来根据单击哪个按钮来更改模式的内容。
function getUserName(username) { var $modal = $('#editUserPopUp'), $userName = $modal.find('#userName'); $userName.val(username); $modal.modal("show"); }
<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>
I think the problem is you are using show
event,instead try call shown
event after all, like so : 我认为问题是您正在使用
show
事件,而不是尝试毕竟尝试调用show
事件, shown
:
function getUserName(username) {
$('#editUserPopUp').modal('show');
$('#editUserPopUp').on('shown', function () {
alert(username);
$("#userName").val(username);
})
}
p/s : did't test it. p / s:没有测试。 Hope this help.
希望能有所帮助。 Comment if did't work.
注释是否无效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.