I made a JavaScript code to process my request search request using Ajax. So thus, my code is defined as the following:
if(document.getElementById('category')){
document.getElementById('category').addEventListener('click', () => {
var query = document.getElementById('category').value;
if(query !== ''){
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', "http://127.0.0.1:8000/category/fetch");
httpRequest.send();
console.log(httpRequest);
}
});
}
where my category is from my form:
<div class="col s12 m8 l8">
<input type="text" name="category" value="{{old('category') ?? $book->category ? $book->category->name : ''}}" class="input-field validate" id="category">
<input type="hidden" name="category_id" value="{{ $book->category ? $book->category->id : ''}}">
</div>
and my get request refers to my function:
public function fetch(Request $request){
dd("You hit me: ".$request);
$category = Category::where('name', 'like', $request['category'])->first();
return response()->json($category);
}
but back to my JavaScript, Why my get request is not hitting my fetch function? while doing it manually on browser it gives me the result and also my console is giving me this kind of result:
response: "<script> Sfdump = window.Sfdump || (function (doc)"
like the image below.
