How to send the to controller with ajax? - php

Question

How do I add code to the input button so that the value of the Id is sent to the Controller?
I have eight images. Then I click on the id of 116, open this image.
When I click on the biggest photo, Open a bootstrap modal for me.
This action tag form is written to this ID 120, While I have selected ID 116.
http://localhost:8000/admin/products/4/galleries/120
#section('content')
<div class="col-md-10 p-5 pt-2">
<form method="post" action="{{ route('products.galleries.store', $product->id) }}" enctype="multipart/form-data" class="dropzone" id="dropzone">
#csrf
</form>
<hr>
<div class="col-md-6 mx-auto">
<div class="row">
<div class="mx-auto" id="showImage">
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="deleteImage('{{ $gallery->id }}', '{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}')">
</div>
</div>
<div class="row">
#foreach($galleries as $gallery)
<div class="col-md-2">
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$gallery->image}") }}', '{{ $gallery->id }}')"><br><div class="text-center text-danger">{{ $gallery->id }}</div>
</div>
#endforeach
</div>
</div>
</div>
<div class="modal fade" id="delete" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog modal-sm">
<form action="{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}" method="post">
#csrf
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">This action is not reversible.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete the image?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</div>
</form>
</div>
</div>
#endsection
#push('script')
<script src="{{ asset('themes/js/dropzone.min.js') }}"></script>
<script>
function showImage(url, id) {
let route = "'"+'{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}'+"'";
let image = '<img src='+url+' onclick="deleteImage('+id+','+route+')" class="img-fluid cursor-pointer" />';
$('#showImage').html(image);
}
function deleteImage(id, url) {
$('#delete').modal(id, url);
}
</script>
#endpush

Answer 1

You are looping through the gallery images, after loop iterations are done you written your code for modal, the last value of gallery which you used for modal is the last index in your collection of gallery images.
This peice of code may help you
$gallery = 5;
$galleries = [5,6,7,9,8];
foreach($galleries as $gallery) {
// code
}
// now your $gallery variable does not hold 5 instead it has 8 as you assigned its value through loop
As you used $gallery vairable before, You can fix your code like this
#foreach($galleries as $_gallery)
<div class="col-md-2">
<img src="{{ asset("storage/{$_gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$_gallery->image}") }}', '{{ $_gallery->id }}')"><br><div class="text-center text-danger">{{ $_gallery->id }}</div>
</div>
#endforeach