How to catch the displayed image ID in Laravel - html

Question

I'm displaying a images from the database and i need to catch the image id from the controller .I'm trying to save image ID to Database
This is the image tag with contain image id
What we need to do is : When the user click the one of image and submit need to catch that selected id from the controller
$kudos->receiveuserid = $request->get('categories');
$kudos->imageid = 'how can i get image ID'

Answer 1

Try something like this and customize according to your requirement
#foreach($categories as $category)
<div>
<img src="{{$category->image}}" class="imgRating">
<input type="radio" value="{{$category->id}}" class="imgId" name="imageid">
</div>
#endforeach
Now in write a little jQuery
$(".imgRating").click(function(){
$(this).parent().find(".imgId").prop( "checked", true );
});
Finally, add CSS
.imgId{
display:none !important;
}
Now in your controller you will get the selected image id by $request->imageid

Answer 2

try this it should work. the idea here is that when you click on the image, the javascript function gets the id and assign it to a modal form then you submit. you can modify it to suit your preference.
<!-- modal to get image id store it in hidden field-->
<div id="imgModal" class="modal fade" >
<div class="modal-dialog box box-default" role="document" style="color:black;font-size:12.5px;">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title">Image Form</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" action="{{ url('img/addid/') }}" method="post" role="form">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group" style="margin: 0 10px;">
<input type="hidden" class="form-control" id="imgid" name="imgid" value="">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-xs">Submit</button>
<button type="button" class="btn btn-danger btn-xs" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- display image code-->
<div class="col-sm-3">
<div class="form-group">
#foreach($category as $category)
<a onclick="imgfunc('{{ $category->id}}')"><img class="boxicon" src="{{ asset('kudosupload/badges/'. $category->image)}}" name="img" ></a>
<br>
#endforeach
</div>
</div>
<!-- javascript to get image id when click on image-->
<script type="text/javascript">
function imgfunc(r)
{
document.getElementById('imgid').value = r;
$("#imgModal").modal('show')
}
</script>
//controller to get input and store in database
public function saveImage(Request $request){
$this->validate($request, [
'imgid' => 'required|string',
]);
$imgid=$request->input('imgid');
$datasave=DB::table('imgtable')->insert([
'id'=>imgid,
]);
return redirect('url')->with('message','Image saved!');
}
//route
Route::post('img/addid','controller#saveImage');