在 Laravel 8 中按提交后表单不断重新加载页面

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

我认为你需要检查你的关闭 div 标签，在关闭表单标签之前，你不能关闭作为表单父级的 div，

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