'Laravel - Data from table passed to Modal that submits form of data to controller
We have a users table that has an edit modal, I have to get the data from the table list of a specific user to the modal, then use Laravel logic to output that data in the modals input fields to be edited and later submitted as a form back to the controller.
Table list
<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>
Edit User modal
<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>
The calling modal
<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>
I've tried sending the id to the modal form with inline javascript fired on the button, but the id doesn't update on each button click, plus once there I can't get back into Laravel variables or logic to start displaying query data again
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|