Passing data from Blade to modal in Laravel
For this, you can use jquery
step(1) add this code in your blade file
<button type="button" data-toggle="modal" data-target-id="{{ $emp->id }}" data-target="#modelName">Button name </button>
step (2) define your jquery method
<script>
$(document).ready(function () {
$("#modelName").on("show.bs.modal", function (e) {
var id = $(e.relatedTarget).data('target-id');
$('#pass_id').val(id);
});
});
</script>
step (3) Make Modal
<div class="modal fade" id="modelName" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog data-dialog-centerd" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="myModalLabel">Model header Name</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#"
method="post"
enctype="multipart/form-data">
{{ csrf_field() }}
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<input class="form-control" name="name" type="text"
id="pass_id">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
How to pass data to edit modal from @foreach blade in Laravel 8
You can pass this
inside your edit_partner
function then use same to get data attribute value and pass same to your modal inputs.
Demo Code :
function edit_partner(el) {
var link = $(el) //refer `a` tag which is clicked
var modal = $("#edit_partner") //your modal
var full_name = link.data('full_name')
var code = link.data('code')
modal.find('#full_name').val(full_name);
modal.find('#code').val(code);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table>
<tr>
<td>
<!-- pass this inside function-->
<a href="#" onclick="edit_partner(this)" data-target="#edit_partner" data-toggle="modal" data-id="{{$partner->id}}" data-full_name="abc" data-code="1">abc</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="edit_partner(this)" data-target="#edit_partner" data-toggle="modal" data-id="{{$partner->id}}" data-full_name="abc2" data-code="2">abc2</a>
</td>
</tr>
</table>
<div class="modal fade" id="edit_partner" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input type="text" id="full_name">
<input type="text" id="code">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Laravel 5.1 pass data from view to modal
Try out this way. I am using a
tag, but the solution should work for you as well with button.
<a
href="#"
data-target="yourModalId"
data-toggle="modal"
data-email="{{ $user->email }}"
data-username="{{ $user->username }}"
>
Edit
</a>
jQuery code:
$('#yourModalId').on('show', function(e) {
var link = e.relatedTarget(),
modal = $(this),
username = link.data("username"),
email = link.data("email");
modal.find("#email").val(email);
modal.find("#username").val(username);
});
Create the input fields inside the modal window with the id
that are passed in find
method.
That will put the values passed in the input fields inside modal window..
How to save the data using a modal from Laravel blade?
The text area is not inside the form that's why the 'denied' request is not added in your controller function.
<div class="container-fluid"> <div class="modal-footer"> <form id="deny-form" action="{{ route('deny_request', $leave->id) }}" method="POST"> {{ csrf_field() }} {{ method_field('PATCH') }} <div class="form-group row"> <div class="col-lg-12"> <textarea type="text" name="denied" placeholder="Say something" style="width: 100%"></textarea> </div> <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button> <button class="btn btn-danger" type="submit"> Send</button> </form> </div>
Related Topics
Move an Image With JavaScript Using Mouse Events
Chrome Blank Pdf Print Preview
React Native: Image Not Displaying With Dynamic/Local Uri
Use Localstorage Variables in PHP
How to Save an Image to Localstorage and Display It on the Next Page
Javascript Submit Multiple Forms With One Button
How to Compress an Image Via JavaScript in the Browser
How to Close Sweet Alert on Ajax Request Completion
Preventing Viewport Resize of Web Page When Android Soft Keyboard Is Active
Filtering Item from Nested Object Array in Typescript
Jquery Class on Click Works on Desktop But Not Mobile
Webcam Js Error in Chrome: Could Not Access Webcam
React Passing Import Name as Prop and Adding to Image Src
Jquery - Ajax Returning Error 500 on Some Posts
Discord.Js Ban/Kick Commands Available to All Users. How to Fix This
How to Prevent a Key Input from Appearing in Input Field
Getting an Array of Column Names At Sheetjs
How to Get the Difference Between Two Arrays of Objects in JavaScript