我們有一個帶有編輯模式的用戶表，我必須從特定用戶的表串列中獲取資料到模式，然后使用 Laravel 邏輯在要編輯的模式輸入欄位中輸出該資料，然后提交為表單回傳給控制器。
表串列
<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>
我嘗試使用在按鈕上觸發的行內 javascript 將 id 發送到模態表單，但是每次單擊按鈕時 id 都不會更新，而且一旦我無法回傳 Laravel 變數或邏輯以開始顯示查詢資料再次
uj5u.com熱心網友回復：
您可以嘗試使用 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">×</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
并在表中打開正確的
<a onclick="$('#modal-{{$user->id}}').modal('show')">Edit User</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/426303.html