controller : public function createSlug(Request $request){
$slug = SlugService::createSlug(Post::class, 'slug', $request->title);
return response()->json(['slug' => $slug]);
}
script : <script>
const title = document.querySelector('#title')
const slug = document.querySelector('#slug')
title.addEventListener('change', () => {
fetch(`/dashboard/manages/createSlug?title=${title.value}`)
.then(response => response.json())
.then(data => slug.value = data.slug)
});
</script>
input : <div class="mb-5">
<label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title
<input type="text" id="title" name="title"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"
required>
</div>
<div class="mb-5">
<label for="slug" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Slug</label>
<input type="text" id="slug" name="slug"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"
required>
</div>
routes : Route::get('/dashboard/manages/createSlug', [DashboardPostController::class, 'createSlug'])->name('dashboard.manages.createSlug');
when i fill title input and press tab or move to the slug input, the slug should automatically be created, but why doesn’t it work? the error message:
GET http://127.0.0.1:8000/dashboard/manages/createSlug?title=first%20post 404 (Not Found)
(anonymous) @create:184
VM6215:1 Uncaught (in promise)
