Form keeps reloading page after pressing Submit in Laravel 8 - php

Question

The caption explains it best. When I press the Submit button - the form should redirect to the Controller method "store" and execute the logic written. But instead, it just reloads the page. How do I know that the Controller isn't accessed? I have tried using dd() in the store() method and it never pops up.
Following is the HTML/PHP:
#extends('admin.layout')
#section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{url('js/datatables/dataTables.bootstrap4.css')}}">
<div class="intro-y col-span-12 mt-4">
<!-- BEGIN: Vertical Form -->
<div class="intro-y box">
<div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
<h2 class="font-medium text-base mr-auto">
Course Cover
</h2>
</div>
<form action="{{ route('course.store') }}" method="post" enctype="multipart/form-data">
#csrf
#method('POST')
<div id="vertical-form" class="p-5">
<div class="preview">
<div class="avatar-upload" style="margin: 0 !important; max-width: 485px;">
<div class="avatar-edit" style="top:-20px !important; /* position: relative !important; */">
<input type='file' name="cover" id="imageUpload" accept=".png, .jpg, .jpeg" />
<label for="imageUpload"><i data-lucide="pen-tool" style="color: #232d45 !important;padding: 3px;left: 4px;top: 4px;position: relative;"></i></label>
</div>
<div id="imagePreview" style="background-size: cover; background-position: center; box-shadow: rgb(0 0 0 / 10%) 0px 2px 4px 0px; border: 1px solid rgb(141 146 157); margin: 0; border-radius: 11px; width: 452.66px !important; height: 224px; background-image: url(https://www.ysm.ca/wp-content/uploads/2020/02/default-avatar.jpg);">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="intro-y col-span-12 mt-4">
<!-- BEGIN: Vertical Form -->
<div class="intro-y box">
<div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
<h2 class="font-medium text-base mr-auto">
Course Details
</h2>
</div>
<div id="vertical-form" class="p-5">
<div class="grid grid-cols-12 gap-2 mt-4 mb-4">
<label for="vertical-form-1" class="form-label col-span-6">Course Title</label>
<label for="vertical-form-1" class="form-label col-span-6">Course Difficulty</label>
<input type="text" name="name" placeholder="Name.." class="form-control col-span-6" placeholder="Input inline 1" aria-label="default input inline 1">
<select name="difficulty" class="form-select form-select col-span-6" aria-label="Select Course Difficulty">
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Expert">Expert</option>
</select>
</div>
<div class="mt-4 mb-4">
<label for="vertical-form-1" class="form-label">Categories</label>
<select name="categories[]" data-placeholder="Choose appropriate categories for this course.." class="tom-select w-full" multiple>
#foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<div class="intro-y col-span-12 mt-4">
<!-- BEGIN: Vertical Form -->
<div class="intro-y box">
<div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
<h2 class="font-medium text-base mr-auto">
Course Description
</h2>
</div>
<div id="vertical-form" class="p-5">
<div class="mt-4 mb-4">
<textarea class="dark:border-darkmode-400"" cols="80" id="editor2" name="description" rows="10" data-sample-short>Type a detailed description of the course i.e its prerequisites, requirements, learning outcome and any other details that may be needed.</textarea>
</div>
</div>
</div>
</div>
<div class="intro-y col-span-12 mt-4">
<!-- BEGIN: Vertical Form -->
<div class="intro-y box">
<div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
<h2 class="font-medium text-base mr-auto">
Choose Instructor
</h2>
</div>
<div id="vertical-form" class="p-5">
<table class="table table-responsive table-striped table-vcenter js-dataTable-full">
<thead>
<tr>
<th class="text-center">PICK</th>
<th>ID</th>
<th>AVATAR</th>
<th class="d-none d-sm-table-cell">NAME</th>
<th class="d-none d-sm-table-cell" style="width: 15%;">EMAIL</th>
<th class="text-center" style="width: 15%;">Profile</th>
</tr>
</thead>
<tbody>
#foreach ($teachers as $teacher)
<tr>
<td class="w-10">
<input class="form-check-input" type="radio" name="teacher_id" value="{{ $teacher->id }}">
</td>
<td class="w-10">{{ $teacher->id }}</td>
<td class="w-20">
<div class="w-10 h-10 image-fit zoom-in ml-2">
<img class="rounded-full" src="{{ url('images/'.$teacher->avatar) }}" alt="">
</div>
</td>
<td class="d-none d-sm-table-cell">{{ $teacher->name }}</td>
<td class="d-none d-sm-table-cell">
<span class="badge badge-danger">{{ $teacher->email }}</span>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" title="View Customer">
<i class="fa fa-user"></i>
</button>
</td>
</tr>
#endforeach
</tbody>
</table>
<button type="submit" class="btn btn-primary mt-5">Create Course</button>
</form>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.19.0/standard-all/ckeditor.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<script>
CKEDITOR.replace('editor2', {
height: 260,
/* Default CKEditor 4 styles are included as well to avoid copying default styles. */
contentsCss: [
'http://cdn.ckeditor.com/4.19.0/full-all/contents.css',
'https://ckeditor.com/docs/ckeditor4/4.19.0/examples/assets/css/classic.css'
],
removeButtons: 'PasteFromWord',
});
</script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
</script>
<script src="{{url('js/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{url('js/datatables/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{url('js/be_tables_datatables.min.js')}}"></script>
#endsection
What am I doing wrong here? Why is the form not taking me to course.store method in the CourseController? And the controller is a resource controller. So the routing is very straight-forward, and not an issue in this case either.

Answer 1

I think you need to check your closing div tags, you must not close a div that is the parent of the form before closing the form tag,

Answer 2

May be you Forgot to remove Last Div tage and also you should write at last #endsection
#extends('admin.layout')
#section('content')
//here you can write your form as well as other HTML
#endsection

Answer 3

I had the same issue, in my case the problem was registered the same Route
Route::post('/users', [UserController::class, 'store']);
Route::post('/users', [UserController::class, 'storeDashboard']);
I wanted to fire store method but storeDashboard was firing instead