How to catch the displayed image ID in Laravel

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'

then just use radio button next to your image and then write a javascript to select the respective radio button on click of an image — Shubham Pokhriyal, Jun 03 '19 at 07:14
@Fed you can just try to replace image wtih radio button and could fetch the value on form submission. in controller > action `$request` object. Here it's already answered how can replace image with radio button. https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons — Vikash Pathak, Jun 03 '19 at 07:18
Possible duplicate of [Use images instead of radio buttons](https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons) — Vikash Pathak, Jun 03 '19 at 07:19
hi @Fed, use hidden value below the image src, in image click event just get the id and push into the hidden value array using jQuery . — Kmg Kumar, Jun 03 '19 at 07:19
@kmgkumar there is a image loop how can i send the hidden specific value — Fed, Jun 03 '19 at 08:38

score 0 · Accepted Answer · answered Jun 03 '19 at 07:26

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

Next time please post your code in writing instead of posting a screenshot — Shubham Pokhriyal, Jun 04 '19 at 07:10

score 0 · Answer 2 · answered Jun 03 '19 at 07:49

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">&times;</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');

How to catch the displayed image ID in Laravel

2 Answers2