从引导模式动态获取文本框值

Question

我有一个可以检索所有用户信息的表格，以及一个可以打开弹出模式以编辑用户详细信息的按钮。模态将正确显示用户数据，但是当我尝试保存用户在单击按钮时输入的更改时，文本框的值将是用户输入的表格机器人的第一行。如何获取当前显示在模式弹出窗口上的文本框的值。

我的观点：

<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">&times;</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>

我的点击事件：

 $('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);
            }
        });
    });

这里的问题例如$("#UpdateuNationalID").val(); 的值将始终是表格第一行的值，而不是弹出窗口中显示的值..

Answer 1

@Carsten Løvbo Andersenis 所说的问题是您在生成 HTML 时使用相同的 Id，因此您的 jQuery var NationalID = $("#UpdateuNationalID").val(); 将采用他找到的第一个值。

要解决这个问题，您需要在每个循环中分配不同的 ID，例如，如果我们假设 NationalID 是唯一的，您可以进行广告关注：

<input type="text" id='UpdateuNationalID @user.NationalID'  name="NationalID" value="@user.NationalID" class="control-label" required>

编辑：

您必须创建一个函数，例如 SaveMe 来等待事件点击，并且您需要在您的模态中发送点击值：

<button type="button" id="UpdateUserBtn" class="btn btn-primary UpdateUserBtn" onclick="SaveMe(@user.NationalID)">تعديل المستخدم </button> 

和你的事件监听器第一行$('body').on('click', '.UpdateUserBtn', function (e) {

把它改成一个函数：

function SaveMe(myId) {

var str1 = 'UpdateuNationalID ' + myId;
var NationalID = document.getElementById(str1).innerHTML;
// or 
var NationalID = document.getElementById(str1).value;
// then
console.log(NationalID);