![](/img/trans.png)
[英]setting value of textbox from button onclick using inline javascript
[英]Setting textbox value in modal window using onclick button using Bootstrap
我試圖使用onclick按鈕在模式文本框中顯示用戶名,我在onclick
上有一個按鈕,我正在調用onclick="getUserName(this.id)"
this.id
給我我想設置的名字
modal textbox userName
這是我的功能
function getUserName(username) {
$('#editUserPopUp').bind('show',function(){
alert(username);
$("#userName").val(username);
});
}
我在alert(username)
獲取用戶名,但是如何將其值設置為我的模態,用戶名文本字段
這是我的模態
<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>
這應該工作。
但是,您還應該查看有關模態窗口的Bootstrap文檔。 有一節說明如何更改模式內容。
使用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>
我認為問題是您正在使用show
事件,而不是嘗試畢竟嘗試調用show
事件, shown
:
function getUserName(username) {
$('#editUserPopUp').modal('show');
$('#editUserPopUp').on('shown', function () {
alert(username);
$("#userName").val(username);
})
}
p / s:沒有測試。 希望能有所幫助。 注釋是否無效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.