Get Textbox value from bootstrap modal dynamically

Question

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">&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>

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();will be always the value of first row of the table not the value that is displayed on the popup..

Answer 1

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(); 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:

<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:

<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) {

change it to be a 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);