Vfrdtyky

I am trying to send ajax request to fetch data from controller when I change date. I am not able to write ajax code properly. My code is as under:

{!!Form::open(['action' => 'BookingsController@store', 'method' => 'POST'])!!}

   @csrf





  <input type="date" name="eventDate" id="eventDate" value="">





  <select name="vehicleName" id="vehicleName">

       <option disabled selected>Choose Vehicle...</option>

  <?php foreach ($availableVehicles as $key => $vehicle): ?>

     <option id="{{$vehicle->id}}">{{$vehicle->name}} </option>

   <?php endforeach; ?>

  </select>



 {!!Form::close()!!}

$(document).ready(function(){

  $(#eventDate).change(function(){

      var eventDate = $(this).val();

 

      $.ajax({

        url:"{{ route('booking.create') }}",

        method:"GET",

        data:{eventDate},

        success:function(result){

          $('#vehicleName').val('');

        }

      });

  });

});

1) You need to add into your data attribute the token variable token. Because Laravel automatically generates a CSRF "token" for each active user session managed by the application. This token is used to verify that the authenticated user is the one actually making the requests to the application.

data{'_token': '{{ csrf_token() }}'},

2) You forgot to add quotes into your #eventDate function. Change this:

$(#eventDate).change(function(){

to this

$('#eventDate').change(function(){

3) My opinion is to create the ajax inside the .change() function. Here is a full code below:

$(document).ready(function(){

  $('#eventDate').change(function(){

     var eventDate = $(this).val();



     $.ajax({

        url:"{{ route('booking.create') }}",

        method:"GET",

        data:{'_token': '{{ csrf_token() }}','eventDate' : eventDate },

        success:function(result){

            $('#vehicleName').val('');

        },

     });

  });

});

I hope it helped you

To avoid form being submitted you should add:

$(document).ready(function(){

  $("#form" ).submit(function( event ) {

    // to track it is working: console.log( "Handler for .submit() called." );

    event.preventDefault();

  });

});