Level 7
you forgot to define name attribute in your input tag.
1 like
May 10, 2017
13
Level 1
Ajax request is empty when it gets to controller
Trying to implement search for quiz app. I have tried to edit the ajax to send the $request to arrive on my controller properly but none of it is working
This is my form
<form class="navbar-form navbar-left" id="searchForm" method="post" action="{{route('quiz.search')}}">
{{ csrf_field() }}
<div class="form-group">
<input type="text" id="query" class="form-control" placeholder="Search">
</div>
<button id="searchSubmit" type="submit" class="btn btn-default">Submit</button>
</form>
and my ajax
$("#searchForm").submit(function(e){
$.ajax({
type:"POST",
url:"quiz/search",
data:$(this).serialize(),
success:function(data){
console.log("we succeded" + data);
}
});
});
public function search(Request $request){
$query = $request->query;
dd($query);
$results = Quiz::where('title','%$query%')->get();
dd($results);
// if (Request::wantsJson()) {
// return response()->json($results);
// }
}
Right now when I dd($query) I am getting,
ParameterBag {#48 ▼
#parameters: []
}
I have tried variations of ajax such as
data:{
'query':$("#query").val(),
'_token':$('input[name=_token]').val()
},
I've also tried adding the e.preventDefault(); at the beginning of the callback function but if I do then my ajax doesn't even reach my controller
Route
Route::post('quiz/search','QuizController@search')->name('quiz.search');
Level 1
Hm, I added name="query"
<input type="text" id="query" class="form-control" name="query" placeholder="Search">
and
$.ajax({
type:"POST",
url:"quiz/search",
data:{
'query':$('input[name=query]').val(),
'_token':$('input[name=_token]').val()
},
success:function(data){
console.log("we succeded" + data);
}
});
and still getting empty parameter bag.
Level 7
how about using $(form).serialize() that you did before ?
Level 75
You are attempting to post a form yet you are doing a search. You just need to pass your search string to controller.
Level 1
Ok after fiddling I got this
$("#searchForm").submit(function(e){
e.preventDefault();
$.ajax({
type:"POST",
url:"quiz/search",
data:$("searchForm").serialize(),
success:function(data){
console.log("we succeded" + data);
}
});
});
which is finally sending the request but now getting error POST 500 cause of the csrf token I think.
Level 3
You do not properly get your data, since $request->query is a property of request object. If you want to use the parameter which named 'query' you must do it like $request->all()['query'] or you can rename it like query1 and get it like $request->query1
Level 7
check the network developer tool in your browser to make sure.
but i think you missed something like
$("searchForm").serialize()
should be
$("#searchForm").serialize()
you missed # .
Level 1
So no matter what thats you access form inputs sent via ajax?
Level 1
Oh did not catch that
Level 1
this works
$("#searchForm").submit(function(e){
// e.preventDefault();
$.ajax({
type:"POST",
url:"quiz/search",
data:$("#searchForm").serialize(),
success:function(data){
console.log("we succeded" + data);
}
});
});
and my $query is can be accessed
$query = $request->all()['query'];
dd($query);
Do I have to put/should put the csrf token in a meta tag in header and do something like
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
before executing ajax even tho its working without it. and when is e.preventDefault() for ajax forms used?since when I add it here everything stops working.
Level 3
when you serialize the form, you send your csrf token like hidden field
Level 7
you should not get request by $request->all()['query'], when there is no query in your request it will fail with 500 server error.
instead you can use $request->get('query'), when there is no query in your request, it will return null.
Level 1
Ah,I tried it just now with $query = $request->get('query'); dd($query); with a empty input and got "" instead of an error but changed it anways.
Please or to participate in this conversation.