CODEWITHSUNDEEP
phpjqueryajaxlaravel
Htet Phyo Naing
Htet Phyo Naing

Reputation: 29

The POST method is not supported for this route. (Laravel with ajax)

I'm trying to check the availability of time and place for reserving event room, using laravel and ajax.

I've tried all possible solutions found on the web. But still not working. Please help.

I've a form whose method is POST. And I don't forget to add @csrf to it. In the form, I have 3 input fields which is normal. Below is my code.

<form id="check-form" method="post">
@csrf
   <input type="text" name="place" id="room_no">
   <input type="text" name="start_time" id="start_time">
   <input type="text" name="end_time" id="end_time">
   <input type="submit" value="submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


$('#check-form').on('submit', function(event) {
    event.preventDefault();

    console.log('I'm still ok till here.');

    $.ajax({
    method: "POST",
        url: "check",
    data: {
        'place': $('#room_no').val(),
        'start_time': $('#start_time').val(),
        'end_time': $('#start_time').val()
    },
    success: function(data) {
        console.log('iam here -> ' + data);
        }
        console.log('ohooh');
    });
});

In my web.php,

Route::post('check', 'MyController@check');

The problem is . . .

The POST method is not supported for this route. Supported methods: GET, HEAD.

It doesn't seem to follow along the route.

Thank you.

edited: As answers say, I've edited like below. But doesn't seem working.


<script type="text/javascript">

/** this does not also work for me. ;-(
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
}); */

$('#check-form').on('submit', function(event) {
    event.preventDefault();

    console.log('I'm still ok till here.');

    $.ajax({
    type: "POST",
        url: "check",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: {
        'place': $('#room_no').val(),
        'start_time': $('#start_time').val(),
        'end_time': $('#start_time').val()
    },
    success: function(data) {
        console.log('iam here -> ' + data);
        }
        console.log('ohooh');
    });
});

Upvotes: 2

Views: 5724

Answers (3)

mukesh kumar
mukesh kumar

Reputation: 588

You need to specify csrf token in script

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(".check-form").on('submit',function(e){
    e.preventDefault();
    $.ajax({
       type:'POST',
       url:'/check',
       data: {
          'place': $('#room_no').val(),
          'start_time': $('#start_time').val(),
          'end_time': $('#start_time').val()
       },
       success:function(data){
          alert(data.success);
       }
    });
});

or 

  $.ajax({
      type:'POST',
      url:'/ajax',
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success:function(data){}
   });

Upvotes: 3

gokhanozgur
gokhanozgur

Reputation: 1

Change ajax request code like this.

 $.ajax({
    type: "POST",
        url: "check",
    data: {
        'place': $('#room_no').val(),
        'start_time': $('#start_time').val(),
        'end_time': $('#start_time').val()
    },
    success: function(data) {
        console.log('iam here -> ' + data);
        }
        console.log('ohooh');
    });

I've replaced request attribute method to type

Upvotes: 0

Vlad Stoica
Vlad Stoica

Reputation: 51

It looks like your JavaScript code has some typos. The POST route you defined is correct, but if you check the network tab of Developer Tools, you'll see that the code tries to POST on the current route (which implicit is a GET/HEAD only, I suppose).

The first typo or mistake is on line 4 of your code:

// unescaped single quote inside single quotes, or wrap the text in double quotes
console.log('I'm still ok till here.');
         // ^-^---------------------^
console.log("I'm still ok till here.");
console.log('I\'m still ok till here.');

The second is on line 16, where you close a bracket ending the success(data) function early, combined with code on line 17 results in an error.

All you need to do is fix the first console.log, and move the second inside the success call.

You can see the code in action here https://jsfiddle.net/c54vuemn/.

$('#check-form').on('submit', function(event) {
  event.preventDefault();

  $.ajax({
    method: "POST",
    url: "check",
    data: {
      'place': $('#room_no').val(),
      'start_time': $('#start_time').val(),
      'end_time': $('#start_time').val()
    },
    success: function(data) {
      console.log('iam here -> ' + data);
      console.log('ohooh');
    }
  });

  return false;
});

I recommend using an editor, plugin, or IDE that at least highlights warnings/errors, typos happen to all of us and are usually a pain to debug.

Upvotes: 0

Related Questions