Laravel - 来自 table 的数据传递给 Modal，后者将数据形式提交给控制器

Question

我们有一个用户 table 有一个编辑模式，我必须从特定用户的 table 列表中获取数据到模式，然后使用 Laravel 逻辑在模态输入字段中输出该数据以进行编辑，然后作为表单提交回控制器。

Table 列表

<div id='recipients' class="p-8 mt-6 rounded shadow bg-white">
        <table id="users" class=" dt-responsive display nowrap" style="width:100%; padding-top: 1em;  padding-bottom: 1em;">
            <thead>
                <tr>
                    <th data-orderable="false">Username </th>
                    <th data-orderable="false">Email</th>
                    <th data-orderable="false">Role </th>
                    <th data-orderable="false">Active</th>
                    <th data-orderable="false"></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                    <tr>
                        <input type="hidden" id="way-id" value="{{ $user->id }}"/>
                        <td id="editable">{{ $user->name }}</td>
                        <td id="editable">{{ $user->email }}</td>
                        <td id="editable">
                            @foreach ($user->getRoleNames() as $roleNames)
                                {{ $roleNames }}
                            @endforeach
                        </td>
                        <td id="editable">
                            <label class="switch mb-3">
                                <input type="checkbox" id="active-user" />
                                <div class="slider"></div>
                            </label>
                        </td>
                        <td>
                            <button type="button" class="btn btn-default btn-edit js-edit" id="{{$user->id}}"><img
                                    class="mb-1 duration-300 ml-4 inset-0 h-6 w-6" src="/../../img/grey-edit.svg" alt="edit"
                                    onclick="(function(){var listInput = document.getElementById('way-id').value;
                                    document.getElementById('testInout').value = listInput;
                                    })();toggleModal('modal-edit-user'); "></button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="flex justify-between mt-4 mb-4">
            <button type="button"
                class="shadow float-left md:shadow-lg rounded-full font-bold px-10 bg-gray-500 text-white">
                <img class="inline-block mb-2 mt-2 w-4 h-4 mr-2" src="../../img/Icon-white-search.png" alt="search icon">
                <a class="no-underline inline-block text-white " onclick="toggleModal('modal-user-types')">User Types</a>
            </button>
            <button type="button"
                class="shadow float-right md:shadow-lg rounded-full font-bold px-10 grantors-btn text-white">
                <img class="inline-block mb-2 mt-2 w-4 h-4 mr-2" src="../../img/Icon-plus-white.png" alt="plus icon">
                <a class="no-underline inline-block text-white " onclick="toggleModal('modal-new-user')">New User</a>
            </button>
        </div>
    </div>

编辑用户模式

<div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center"
        id="modal-edit-user">
        <div class="relative max-w-md    my-6 mx-auto max-w-sm">
            <div class="border-0 shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none ">
                <div
                    class=" modal-bg modal-header flex items-start justify-between p-2 border-b border-solid border-gray-200">
                    <h3 class="text-lg font-semibold text-white pr-8">Edit User</h3>
                    <button
                        class="p-1 ml-auto bg-transparent border-0 text-gray-300 float-right text-xl leading-none font-semibold outline-none focus:outline-none"
                        onclick="toggleModal('modal-edit-user')">
                        <span class="bg-transparent h-4 w-4 text-2xl block outline-none focus:outline-none">
                            <img class="mb-1 duration-300 h-4 w-4" href="" src="/../../img/black-close-icon.svg"
                                alt="close icon">
                        </span>
                    </button>
                </div>
                <div class="relative p-4 flex-auto">
                    <!-- Edit user form -->
                    <form method="POST" action="" id="edit-user-way">
                        @csrf
                        @php
                            $indiUser = '';
                        @endphp
                        <input type="hidden" id="testInout" value="" />
                        <div class="pt-8 space-y-6 sm:pt-10 sm:space-y-5">
                            <div class="flex">
                                <div class="w-full h-12">
                                    <div class="text-gray-700 md:flex md:items-center">
                                        <div class="mb-1 md:mb-0 md:w-full">
                                            <label for=""
                                                class="text-black font-semibold mb-1 md:mb-0 mr-2 whitespace-nowrap">Username</label>
                                        </div>
                                        <div class="md:w-2/3 md:flex-grow">
                                            <input
                                                class="w-48 h-8 px-3 text-base focus:shadow-outline placeholder-gray-800 border focus:shadow-outline  @error('') is-invalid @enderror"
                                                name="" value="{{ $user->name }}" id="" type="text" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex">
                                <div class="w-full h-12">
                                    <div class="text-gray-700 md:flex md:items-center">
                                        <div class="mb-1 md:mb-0 md:w-full">
                                            <label for=""
                                                class="text-black font-semibold mb-1 md:mb-0 mr-2 whitespace-nowrap">Forename</label>
                                        </div>
                                        <div class="md:w-2/3 md:flex-grow">
                                            <input
                                                class="w-48 h-8 px-3 text-base focus:shadow-outline placeholder-gray-800 border focus:shadow-outline  @error('') is-invalid @enderror"
                                                name="" value="" id="" type="text" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex">
                                <div class="w-full h-12">
                                    <div class="text-gray-700 md:flex md:items-center">
                                        <div class="mb-1 md:mb-0 md:w-full">
                                            <label for=""
                                                class="text-black font-semibold mb-1 md:mb-0 mr-2 whitespace-nowrap">Surname</label>
                                        </div>
                                        <div class="md:w-2/3 md:flex-grow">
                                            <input
                                                class="w-48 h-8 px-3 text-base focus:shadow-outline placeholder-gray-800 border focus:shadow-outline  @error('') is-invalid @enderror"
                                                name="" value="" id="" type="text" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex">
                                <div class="w-full h-12">
                                    <div class="text-gray-700 md:flex md:items-center">
                                        <div class="mb-1 md:mb-0 md:w-full">
                                            <label for=""
                                                class="text-black font-semibold mb-1 md:mb-0 mr-2 whitespace-nowrap">Role</label>
                                        </div>
                                        <div class="md:w-2/3 md:flex-grow">
                                            <select
                                                class="w-48 h-8 px-3 text-base focus:shadow-outline placeholder-gray-800 border focus:shadow-outline  @error('') is-invalid @enderror"
                                                name="" id="">
                                                <option value="0" disabled selected>Select</option>
                                                <option value="January">January</option>
                                                <option value="February">February</option>
                                                <option value="March">March</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex border-b border-t border-orange-200 border-divider mt-2">
                                <div class="w-full h-8 mt-2 mb-2">
                                    <div class="text-gray-700 md:flex md:items-center">
                                        <div class="mb-1 md:mb-0 md:w-1/2">
                                            <label for=""
                                                class="text-black font-semibold mb-1 md:mb-0 mr-2 whitespace-nowrap">Activate/Deactivate
                                                Account</label>
                                        </div>
                                        <div class="md:w-full md:flex-grow">
                                            <label class="switch mb-3 float-right">
                                                <input type="checkbox" id="active-user" />
                                                <div class="slider"></div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2 content-center items-center">
                            <button type="submit"
                                class="justify-center content-center  border border-orange-200 border-divider w-full items-center shadow md:shadow-lg rounded-full w-64 font-bold px-10 bg-white text-black">
                                <img class="inline-block mb-2 mt-2 w-4 h-4 mr-2" src="../../img/Icon-orange-save.svg"
                                    alt="Save icon">Save Changes
                            </button>
                        </div>
                        <div class="flex justify-center content-center items-center mt-2">
                            <button type="button"
                                class="justify-center w-64 border border-gray-400 border-divider content-center w-full items-center shadow md:shadow-lg rounded-full font-bold px-10 bg-white">
                                <img class="inline-block mb-2 mt-2 w-4 h-4 mr-2" src="../../img/Icon-gray-close.png"
                                    alt="close icon">
                                <a class="no-underline inline-block text-black "
                                    onclick="toggleModal('modal-example-small-4')">Delete Users</a>
                            </button>
                        </div>
                        <div>
                    </form>
                </div>
            </div>
        </div>
        <!--footer-->
        <div class="flex w-full  items-center justify-end border-t border-solid border-gray-200">
            <button
                class="modal-header text-white w-full font-bold uppercase text-xs px-4 py-2 shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
                type="button" onclick="toggleModal('modal-edit-users')">
                Cancel
            </button>
        </div>
    </div>
    </div>
    </div>
    </div>

调用模式

   <script type="text/javascript">
        //
        function toggleModal(modalID) {
            document.getElementById(modalID).classList.toggle("hidden");
            document.getElementById(modalID + "-backdrop").classList.toggle("hidden");
            document.getElementById(modalID).classList.toggle("flex");
            document.getElementById(modalID + "-backdrop").classList.toggle("flex");

        }
    </script>

我已经尝试将 id 发送到模态表单，并在按钮上触发内联 javascript，但 id 不会在每次单击按钮时更新，而且一旦出现我就无法返回Laravel 再次开始显示查询数据的变量或逻辑

Answer 1

您可以尝试为所有用户生成专用模态，使用 id，然后打开属于该用户的模态。

例如创建所有模态：

@foreach($users as $user)
<div class="modal" tabindex="-1" role="dialog" id="modal-{{$user->id}}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endforeach

并在 table

中打开正确的那个

<a onclick="$('#modal-{{$user->id}}').modal('show')">Edit User</a>