Laravel AJAX Form 405 Error - ajax

Question

I'm receiving this error when attempting to submit via AJAX. When not using AJAX, the form submits just fine to it's specified url. I've read this error can happen because the form is trying to submit in the browser along with the AJAX request. I've tried using onsubmit="event.preventDefault()".
ROUTE:
Route::post('/post/{id}', [
'uses' => '\App\Http\Controllers\PostController#postMessage',
'as' => 'post.message',
'middleware' => ['auth'],
]);
FORM:
<form id="post" role="form" action="{{ route('post.message', ['id' => $user->id]) }}" onsubmit="event.preventDefault()">
<div class="feed-post form-group{{ $errors->has('post') ? ' has-error' : ''}}">
<textarea class="form-control feed-post-input" rows="2" id="postbody" name="post" placeholder="What's up?"></textarea>
<div class="btn-bar">
<!-- <button type="button" class="btn btn-default btn-img btn-post" title="Attach an image"><span class="glyphicon glyphicon-picture"></span></button> -->
<!-- <input type="file" id="img-upload" style="display:none"/> -->
<button class="btn btn-default btn-post" title="Post your message"><span class="glyphicon glyphicon-ok"></span></button>
</div>
#if ($errors->has('post'))
<span class="help-block">{{ $errors->first('post') }}</span>
#endif
</div>
<input type="hidden" name="_token" value="{{ CSRF_token() }}">
</form>
CONTROLLER:
public function postMessage(Request $request, $id)
{
$this->validate($request, [
'post' => 'required|max:1000',
]);
if(Request::ajax()){
Auth::user()->posts()->create([
'body' => $request->input('post'),
'profile_id' => $id
]);
}
}
JS:
$('#post').submit(function(){
var body = $('#postbody').val();
var profileId = $('#user_id').text();
var postRoute = '/post/'+profileId;
var dataString = "body="+body+"&profile_Id="+profileId;
$.ajax({
type: "POST",
url: postRoute,
data: dataString,
success: function(data){
console.log(data);
}
});
});

Answer 1

try this, remove
onsubmit="....." attribute from form
and update your submit method like this
$('#post').submit(function(event){
var body = $('#postbody').val();
var profileId = $('#user_id').text();
var postRoute = '/post/'+profileId;
var dataString = "body="+body+"&profile_Id="+profileId;
$.ajax({
type: "POST",
url: postRoute,
data: dataString,
success: function(data){
console.log(data);
}
});
//this will prevent your default form submit
event.preventDefault();
});
I hope this will work for you