title: Changing roles on admin panel in checkbox
body: <p>In presented controller, it's displaying all the users and his attributes(?) such as name, surname, phone and roles. How do I make it that when I select role in checkbox and press "potvrdi"(submit) it submits to database? Do I have to use jquery, ajax?
  Thank you</p>
  
  <p>Controller </p>
  
  <pre><code>public function action(Request $request)
      {
          if ($request-&gt;ajax()) {
              $query = $request-&gt;get('query');
              if ($query != '') {
                  $data = User::where('surname', 'like', '%'.$query.'%')
                      -&gt;orWhere('name', 'like', '%'.$query.'%')
                      -&gt;orWhere('phone', 'like', '%'.$query.'%')
                      -&gt;orderBy('id')
                      -&gt;get();
              } else {
                  $data = User::orderBy('id')
                      -&gt;get();
              }
              return json_encode($this-&gt;generateUserTable($data));
          }
      }
  
      public function generateUserTable($data)
      {
          $total_row = $data-&gt;count();
          $output = "";
          if ($total_row &gt; 0) {
              foreach ($data as $row) {
                  $roleNames = '';
                  $userRoles = $row-&gt;roles()-&gt;pluck('id')-&gt;toArray();
                  // var_dump($userRoles);
                  $checked = '';
                  foreach (Role::all() as $roles1) {
                      if (in_array($roles1-&gt;id, $userRoles)) {
                          $checked = 'checked="checked"';
                      }
                      $roleNames .= $roles1-&gt;role != null ? $roles1-&gt;role.' '.'&lt;input type="checkbox" '.$checked.' name="role" value="'.$roles1-&gt;id.'" class="checkbox" id="checkboxId"&gt;'.' ' : '';
                  }
                  $output .= '
                      &lt;tr&gt;
                          &lt;td&gt;'.$row-&gt;surname.'&lt;/td&gt;
                          &lt;td&gt;'.$row-&gt;name.'&lt;/td&gt;
                          &lt;td&gt;'.$row-&gt;phone.'&lt;/td&gt;
                          &lt;td&gt;'.$roleNames.'&lt;/td&gt;
                          &lt;td&gt;&lt;button type="button" id="potvrdi" class="potvrdi-button btn btn-primary" data-id="'.$row-&gt;id.'"&gt;
                          &lt;div class="potvrdi"&gt;Potvrdi&lt;/div&gt;
                          &lt;/button&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;button type="button" id="rowId" class="remove-button btn btn-danger" data-id="'.$row-&gt;id.'"&gt;
                          &lt;div class="close"&gt;&amp;#120;&lt;/div&gt;
                          &lt;/button&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  ';
              }
          } else {
              $output = '
                  &lt;tr&gt;
                      &lt;td align="center" colspan="5"&gt;Nema podataka&lt;/td&gt;
                  &lt;/tr&gt;
              ';
          }
          return array(
              'table_data'  =&gt; $output,
              'total_data'  =&gt; $total_row,
          );
      }
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>part of html is in controller after $output in generateUserTable</p>
  
  <p>view with js</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;h2&gt;{{ $modal }}&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="rem-mod btn btn-secondary" data-dismiss="modal"&gt;Zatvori&lt;/button&gt;
                  &lt;button type="button" class="bck-mod test btn btn-danger" data-dismiss="modal"&gt;Obriši korisnika&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- users and search bar --&gt;
  &lt;div class="container"&gt;
      &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Pretraži korisnike&lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="text" name="search" id="search" class="form-control" placeholder="Pretraži korisnike" /&gt;
              &lt;/div&gt;
              &lt;div class="table-responsive"&gt;
                  &lt;h3 align="center"&gt;Broj korisnika: &lt;span id="total_records"&gt;&lt;/span&gt;&lt;/h3&gt;
                  &lt;table id="users" class="table table-striped table-bordered"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Prezime&lt;/th&gt;
                              &lt;th&gt;Ime&lt;/th&gt;
                              &lt;th&gt;Telefon&lt;/th&gt;
                              &lt;th&gt;Rola&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                  &lt;tbody&gt;
  
                  &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Gets data from database</p>
  
  <pre><code>&lt;script&gt;   
      $(document).ready(function(){
          fetch_user_data();
          function fetch_user_data(query = ''){
              $.ajax({
                  url:"{{ route('live_search.action') }}",
                  method:'GET',
                  data:{query:query},
                  dataType:'json',
                  success:function(data)
                  {
                      $('tbody').html(data.table_data);
                      $('#total_records').text(data.total_data);
                  }
              })
          }
  
          $(document).on('click', '.potvrdi-button', function(){
              post_user_role();
              var id = $(this).data('id');
              function post_user_role(id){
                  $.ajax({
                      url:"{{ route('live_search.action') }}",
                      method:"GET",
                      data:{id:id},
                      dataType:'json',
                      success:function(data)
                      {
                          $('tbody').html(data.table_data);
                          $('#total_records').text(data.total_data);
                      }
                  })
              }
          })
  
          $(document).on('keyup', '#search', function(){
              var query = $(this).val();
              fetch_user_data(query);
          });
  </code></pre>
  
  <p>Modal js</p>
  
  <pre><code>        $('#users').on('click', '.remove-button', function(){
              var id = $(this).data('id');
              $(".test").attr('data-id', id);
              $("#deleteModal").modal("show");
          });
  
          $(document).on('click', '.bck-mod', function(){
              var id = $(this).data('id');
              $.ajax({
                  //url:"{{ route('live_search.destroy') }}",
                  url:"/live_search/destroy",
                  method:"get",
                  data:{id:id},
                  dataType:'json',
                  success:function(data)
                  {
                      $('tbody').html(data.table_data);
                      $('#total_records').text(data.total_data);
                  },
                  error: function(data)
                  {
                      console.log(data);
                  }
              })
          });
      });
  &lt;/script&gt;
  </code></pre>