從引導模式動態獲取文本框值

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>

編輯：

您必須創建一個 function 例如SaveMe而不是等待事件單擊，並且您需要在模態中單擊時發送一個值：

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

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

將其更改為 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);