title: laravel update status to 0 or 1 when button is toggled in a single row using ajax
body: <p>I'm relatively new to Laravel. I'm trying to update the 'is_active' column in mysql when the button is toggled without reloading the page. Each row of the table will have the button. I'm also trying to display a pop out message when button is toggled by having the same effect as bootstrap delete confirmation modal. </p>
  
  <p>What i have up to until now is making the toggle button work, but when i tried to toggle the button, there is no changes made to the database. I'm thinking whether should i use a form for the checkbox</p>
  
  <p>UPDATED</p>
  
  <p>This is how my button looks like in html</p>
  
  <pre><code>@foreach($system_functions as $function)
      &lt;input type="hidden" id="id_input" value="{{$function-&gt;id}}" &gt;
      @if($function-&gt;group_id == 1)
          &lt;tr&gt;
              &lt;td&gt;{!! $function-&gt;name !!}&lt;/td&gt;
              &lt;td&gt;&lt;input class="toggle_status" type="checkbox" @if($function-&gt;is_active) checked @endif id="is_active" name="is_active" value="on" data-toggle="toggle"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      @endif
  @endforeach
  </code></pre>
  
  <p>I also have an update function in controller</p>
  
  <pre><code>public function update(Request $request, $id)
  {
      $function=SystemFunction::where('id',$id)-&gt;first();
      if($request-&gt;get('is_active')==='on'){
          $is_active=1;
      } else{
          $is_active=0;
      }
      $function-&gt;update([
          'is_active' =&gt; $is_active
      ]);
      return redirect('admin/system-functions')-&gt;with('status','SUCCESSFUL');
  }
  </code></pre>
  
  <p>and i'm calling this in my route</p>
  
  <pre><code>Route::group(array('prefix' =&gt; 'admin', 'namespace' =&gt; 'Admin', 'middleware' =&gt; 'staff'), function () {
      Route::post('/system-functions', 'SystemFunctionController@update')-&gt;name('system-functions');
  }
  </code></pre>
  
  <p>and my js looks like this in my view</p>
  
  <pre><code>@section('script')
  &lt;script type="text/javascript"&gt;
      $(document).ajaxStop(function () {
          $('.toggle_status').on('click', function (e) {
              var is_checked = false
              if ($(this).is(':checked')) {
                  is_checked = true;
              }
              $.ajax({
                  type: 'POST',
                  url: '{{ route('admin.system-functions') }}', // use proper route to system-functions here
                  async: true,
                  data: {
                      is_checked: is_checked,
                      id: {{ $function-&gt;id }}
                  },
                  success: function (result) {
                      alert('Toggle successfull'); // use proper alert message here
                      e.stopImmediatePropagation();
                      return false;
                  }
              });
          });
      });
  &lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>console error
  <a href="https://i.stack.imgur.com/abcaL.png" rel="nofollow noreferrer">console error</a></p>