CODEWITHSUNDEEP
laravellaravel-8
Pooja
Pooja

Reputation: 613

How to call a controller function when someone click on a check box in laravel 8

is there any way to call a controller function when someone click on a check box. Like There are 4 check box with each has a category so when a user click on particular category then it will hit an API that process the filter request from the backend. I searched on Google but there is option to change it to

<a href="API url"></a>

But that I don't want. Do I have to use jquery or else?

enter image description here

Upvotes: 0

Views: 1079

Answers (1)

Nipun Tharuksha
Nipun Tharuksha

Reputation: 2567

As in the comment section you can achive this via JQuery/Javascript. I have added a simple example with JQuery for your reference. What I achive here is first catch all check un check events and then via Ajax I send a request to the server. So that controller function will get called. You can test this via network tab when you check or uncheck a checkbox.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <title>Check the Status of Checkboxes</title>
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script>
         $(document).ready(function(){
          
          //Add CSRF token to headers
            $.ajaxSetup({
                    headers:
                    { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                });
         
         
         
                $('input[type="checkbox"]').click(function(){
                
                 const val = $(this).val()
                 
                    if($(this).prop("checked") == true){
                   
                       alert(val+' Checked and sending data to server')
                       
                       $.ajax({
                              type: "POST",
                              url: "file", // Route 
                              data: { checkbox_val:val }
                             })
                               .done(function( msg ) {
                                   alert( "Data: " + msg );
                               });

                    }else{
                    
                     alert($(this).val()+' unchecked');
                     
                      $.ajax({
                              type: "POST",
                              url: "file",
                              data: { checkbox_val:val }
                              })
                              .done(function( msg ) {
                                  alert( 'Record removed' );
                              });

                     }
                });
            });
      </script>
   </head>
   <body>
      <input value="A" type="checkbox"> A
      <input value="B" type="checkbox"> B
      <input value="C" type="checkbox"> C
   </body>
</html>

Upvotes: 1

Related Questions