title: sending ajax data to a route to call a controller method
body: <p>I'm trying to pass ajax data to a "settings/addsection/{class_id}" route with parameter so as to call a controller method to log on laravel log file. but logging does not work. So the ajax didn't send data to the route. How do I fix this?.. Note that the $class_id which i passed to the hidden input has value as i have queried it from the database.</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>&lt;script&gt;
  
      document.addEventListener('DOMContentLoaded' , function(){
  
         var add =  document.getElementById('addSection');
         add.addEventListener('submit' , function(e){
              e.preventDefault();
              var class_id = document.getElementById('class_id').value;
              var section = document.getElementById('name').value;
              var token = document.getElementsByName('_token')[0].value;
  
              var data = {
                  name:section,
                  _token:token
              }
  
              var xhr = new XMLHttpRequest();
              xhr.open('POST', 'settings/addsection/' + class_id, true);
              xhr.setRequestHeader('Content-Type' , 'application/json');
              xhr.send(JSON.stringify(data));
  
         })
      })
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>form id = "addSection" method="POST" action=" {{ url('settings/addsection/' .$class_id)}}"&gt;
                                  @csrf
                                  &lt;div class="form-group row"&gt;
                                      &lt;label for="name" class="col-md-4 col-form-label text-md-right"&gt;{{ __('add section') }}&lt;/label&gt;
                                      &lt;div class="col-md-6"&gt;
                                         &lt;input id="name" name="name" type="text" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}"  autocomplete="name" autofocus placeholder="A,B,C...Z"&gt;
                                          &lt;input type="hidden" id = "class_id" value = "{{$class_id}}"&gt;
  
                                          @error('name')
                                              &lt;span class="invalid-feedback" role="alert"&gt;
                                                  &lt;strong&gt;{{ $message }}&lt;/strong&gt;
                                              &lt;/span&gt;
                                          @enderror
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group row mb-0"&gt;
                                      &lt;div class="col-md-6 offset-md-4"&gt;
                                          &lt;button type="submit" class="btn btn-primary btn-block"&gt;
                                              {{ __('Add add section') }}
                                          &lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                              &lt;/form&gt;
  </code></pre>
  
  <p><strong>this is the web.php where the routes are</strong></p>
  
  <pre><code>Route::middleware(['auth' , 'admin'])-&gt;group(function(){
      Route::prefix('settings')-&gt;group(function(){
          Route::post('addsection/{class_id}' , 'SectionController@store');
      });
  
  });
  </code></pre>
  
  <p><strong>SectionController</strong></p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use Illuminate\Support\Facades\Log;
  use App\Section;
  
  class SectionController extends Controller
  {
      public function store(Request $request , $class_id){
          //do stuff here
          Log::info(' it works');
      }
  }
  </code></pre>