Passing Data from Blade to Modal in Laravel

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.



Leave a reply



Submit