[英]Get Textbox value from bootstrap modal dynamically
I have a table that will retrieve all the users information along with a button that will open a popup modal to edit the user details.我有一个表格,它将检索所有用户信息以及一个按钮,该按钮将打开一个弹出模式以编辑用户详细信息。 The Modal will display the user data correctly, but when I try to save the changes that the user has entered on a button click, the value of the textboxes will be the first row of the table bot the one that the user entered.模态将正确显示用户数据,但是当我尝试保存用户在单击按钮时输入的更改时,文本框的值将是用户输入的表格机器人的第一行。 How can I get the value of the textbox that is currently displayed on the modal popup.如何获取当前显示在模式弹出窗口上的文本框的值。
My View:我的观点:
<div class="form-group" align="center">
<table id="AllUsersTable2" class="display" style="width:100%;">
<tr>
<th>id</th>
<th>FullName</th>
<th>username</th>
<th>MobileNumber</th>
<th>Email</th>
<th>IsActiveText</th>
<th>RoleName</th>
<th>Edit</th>
</tr>
@foreach (var user in Model.UserTable)
{
<tr>
<td>@user.NationalID</td>
<td>@user.FullName</td>
<td>@user.username</td>
<td>@user.MobileNumber</td>
<td>@user.Email</td>
<td>@user.IsActiveText</td>
<td>@user.RoleName</td>
<td><button class="btn btn-primary" id="" data-toggle="modal" data-target="#@user.NationalID">عرض</button></td>
</tr>
//PopUp Starts HERE
<div class="modal fade" id="@user.NationalID" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="test2" style="text-align: right;"> بيانات المستخدم</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
@using (Html.BeginForm(Html.BeginForm(null, null, FormMethod.Post, new { @id = "UpdateUserForm" })))
{
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="NationalID" class="control-label">رقم الهوية</label>
<input type="text" id="UpdateuNationalID" name="NationalID" value="@user.NationalID" class="control-label" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="FullName" class="control-label">الإسم</label>
<input type="text" id="UpdateFullName" name="FullName" value="@user.FullName" class="control-label" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="username" class="control-label">اسم المستخدم</label>
<input type="text" id="Updateusername" name="username" value="@user.username" class="control-label" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="MobileNumber" class="control-label">رقم الهاتف</label>
<input type="text" id="UpdateMobileNumber" name="MobileNumber" value="@user.MobileNumber" class="control-label" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="Email" class="control-label">البريد الإلكتروني</label>
<input type="text" id="UpdateEmail" name="Email" value="@user.Email" class="control-label">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="IsActive" class="control-label">حالة المستدم</label>
<select name="IsActive" id="UpdateIsActive">
<option value="">...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="RoleId" class="control-label">البريد الإلكتروني</label>
<select name="RoleId" id="UpdateRoleId">
<option value="">...</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
</div>
</div>
</div>
</div>
}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
<button type="button" id="UpdateUserBtn" class="btn btn-primary UpdateUserBtn">تعديل المستخدم </button>
</div>
</div>
</div>
</div>
//PopUp END HERE
}
</table>
</div>
My Click Event:我的点击事件:
$('body').on('click', '.UpdateUserBtn', function (e) {
var NationalID = $("#UpdateuNationalID").val();
console.log(NationalID);
var username = $('#Updateusername').val();
var FullName = $('#UpdateFullName').val();
var MobileNumber = $('#UpdateMobileNumber').val();
var Email = $('#UpdateEmail').val();
var RoleId = $('#UpdateRoleId').val();
var IsActive = $('#UpdateIsActive').val();
$.post("@Url.Action("UpdateUser", "Home")", { NationalID: NationalID, username: username, FullName: FullName, MobileNumber: MobileNumber, Email: Email, RoleId: RoleId, IsActive: IsActive }, function (data) {
if (data.Result == 1) {
//closePopup();
$.notify(
"تم الحفظ بنجاح",
{
globalPosition: 'top center',
className: 'success'
}
);
}
else {
console.log(data);
$.notify(
"حدث خطأ أثناء الحفظ ",
{
globalPosition: 'top center',
className: 'danger'
}
);
// console.log(data);
}
});
});
The problem here for example the value of $("#UpdateuNationalID").val();
这里的问题例如$("#UpdateuNationalID").val();
的值will be always the value of first row of the table not the value that is displayed on the popup..将始终是表格第一行的值,而不是弹出窗口中显示的值。
The problem as said by @Carsten Løvbo Andersenis is that you are using the same Id
when generating the HTML, so your jQuery var NationalID = $("#UpdateuNationalID").val();
@Carsten Løvbo Andersenis 所说的问题是您在生成 HTML 时使用相同的Id
,因此您的 jQuery var NationalID = $("#UpdateuNationalID").val();
will take the first value that he find.将采用他找到的第一个值。
To solve this, you need to assign a different Id in every loop, for example you can do ad follow if we suppose that NationalID is unique:为了解决这个问题,您需要在每个循环中分配一个不同的 ID,例如,如果我们假设NationalID是唯一的,您可以执行广告关注:
<input type="text" id='UpdateuNationalID @user.NationalID' name="NationalID" value="@user.NationalID" class="control-label" required>
EDIT:编辑:
You have to create a function for example SaveMe
instead to wait for the event click, and you need to send a value on click in your modal:您必须创建一个 function 例如SaveMe
而不是等待事件单击,并且您需要在模态中单击时发送一个值:
<button type="button" id="UpdateUserBtn" class="btn btn-primary UpdateUserBtn" onclick="SaveMe(@user.NationalID)">تعديل المستخدم </button>
and your event listner first line $('body').on('click', '.UpdateUserBtn', function (e) {
和你的事件监听器第一行$('body').on('click', '.UpdateUserBtn', function (e) {
change it to be a function:将其更改为 function:
function SaveMe(myId) {
var str1 = 'UpdateuNationalID ' + myId;
var NationalID = document.getElementById(str1).innerHTML;
// or
var NationalID = document.getElementById(str1).value;
// then
console.log(NationalID);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.