Multi-step form not submitting to database
Whenever I click on submit button it does not, it will not submit, it will not show any error message. The submit button does not work when i click on it.Here is the form:```@extends('admin.admin_dashboard')@section('admin')<div class="page-content"> <!--breadcrumb--> <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3"> <div class="breadcrumb-title pe-3">Register Crime</div> <div class="ps-3"> <nav aria-label="breadcrumb"> <ol class="breadcrumb mb-0 p-0"> <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a> </li> <li class="breadcrumb-item active" aria-current="page">Crime</li> </ol> </nav> </div> <div class="ms-auto"> <div class="btn-group"> <button type="button" class="btn btn-primary">Settings</button> <button type="button" class="btn btn-primary split-bg-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> <span class="visually-hidden">Toggle Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated link</a> </div> </div> </div> </div> <!--end breadcrumb--> <!--start stepper one--> <h6 class="text-uppercase">Crime Registration Form</h6> <hr> <div id="stepper1" class="bs-stepper"> <div class="card"> <div class="card-header"> <div class="d-lg-flex flex-lg-row align-items-lg-center justify-content-lg-between" role="tablist"> <div class="step" data-target="#test-l-1"> <div class="step-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1"> <div class="bs-stepper-circle">1</div> <div class=""> <h5 class="mb-0 steper-title">Crime Form 1</h5> <p class="mb-0 steper-sub-title">Enter Crime Details</p> </div> </div> </div> <div class="bs-stepper-line"></div> <div class="step" data-target="#test-l-2"> <div class="step-trigger" role="tab" id="stepper1trigger2" aria-controls="test-l-2"> <div class="bs-stepper-circle">2</div> <div class=""> <h5 class="mb-0 steper-title">Crime Form 2</h5> <p class="mb-0 steper-sub-title">Enter Crime Details</p> </div> </div> </div> <div class="bs-stepper-line"></div> <div class="step" data-target="#test-l-3"> <div class="step-trigger" role="tab" id="stepper1trigger3" aria-controls="test-l-3"> <div class="bs-stepper-circle">3</div> <div class=""> <h5 class="mb-0 steper-title">Crime Form 3</h5> <p class="mb-0 steper-sub-title">Enter Crime Details</p> </div> </div> </div> <div class="bs-stepper-line"></div> <div class="step" data-target="#test-l-4"> <div class="step-trigger" role="tab" id="stepper1trigger4" aria-controls="test-l-4"> <div class="bs-stepper-circle">4</div> <div class=""> <h5 class="mb-0 steper-title">Crime Form 4</h5> <p class="mb-0 steper-sub-title">Enter Crime Details</p> </div> </div> </div> </div> </div> <div class="card-body"> <div class="bs-stepper-content"> <form method="POST" action="{{ route('crime.store') }}" enctype="multipart/form-data"> @csrf <div id="test-l-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger1"> <h5 class="mb-1">Crime Information</h5> <p class="mb-4">Enter Details of the Crime</p> <div class="row g-3"> <div class="col-12 col-lg-6"> <label for="InputCountry" class="form-label">Crime Type</label> <select class="form-select" name="crime_type" id="InputCountry" aria-label="Default select example"> <option selected>Select Crime</option> @foreach($categories as $category) <option value="{{ $category->id }}">{{ $category->category_name }}</option> @endforeach </select> </div> <div class="col-12 col-lg-6"> <label for="FisrtName" class="form-label">Crime Date</label> <input type="date" class="form-control" name="crime_date" id="CrimeDate" placeholder="First Name"> </div> <div class="col-12 col-lg-6"> <label for="LastName" class="form-label">Crime Time</label> <input type="time" class="form-control" name="crime_time" id="CrimeTime" placeholder="Last Name"> </div> <div class="col-12 col-lg-6"> <label for="PhoneNumber" class="form-label">Location</label> <input type="text" class="form-control" name="location" id="location" placeholder="Crime Location"> </div> <div class="col-md-12"> <label for="input23" class="form-label">Description</label> <textarea class="form-control" name="description" id="input23" placeholder="Crime Descriotion ..." rows="3"></textarea> </div> <div class="col-12 col-lg-6"> <button class="btn btn-primary px-4" onclick="stepper1.next()">Next<i class='bx bx-right-arrow-alt ms-2'></i></button> </div> </div><!---end row--> </div> <div id="test-l-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger2"> <h5 class="mb-1">Crime Information</h5> <p class="mb-4">Enter Details of the Crime</p> <div class="row g-3"> <div class="col-12 col-lg-6"> <label for="InputEmail" class="form-label">Reported By</label> <input type="text" class="form-control" name="reported_by'" id="InputEmail" placeholder="Reported By"> </div> <div class="col-12 col-lg-6"> <label for="InputCountry" class="form-label">Priority</label> <select class="form-select" name="priorit" id="InputCountry" aria-label="Default select example"> <option value="1">Low</option> <option value="2">Medium</option> <option value="3">High</option> </select> </div> <div class="col-12 col-lg-6"> <label for="InputCountry" class="form-label">Status</label> <select class="form-select" name="status" id="InputCountry" aria-label="Default select example"> <option value="open">Open</option> <option value="closed">Closed</option> <option value="in-progress">In-progress</option> </select> </div> <div class="col-12 col-lg-6"> <label for="InputEmail2" class="form-label">Police Report Number</label> <input type="text" class="form-control" name="police_report_number" id="InputEmail2" placeholder="Police Report Number"> </div> <div class="col-12 col-lg-6"> <label for="InputPassword" class="form-label">Anonymous</label> <select class="form-select" name="anonymous" id="anonymous" aria-label="Default select example"> <option value="open">False</option> <option value="closed">True</option> </select> </div> <div class="col-12"> <div class="d-flex align-items-center gap-3"> <button class="btn btn-outline-secondary px-4" onclick="stepper1.previous()"><i class='bx bx-left-arrow-alt me-2'></i>Previous</button> <button class="btn btn-primary px-4" onclick="stepper1.next()">Next<i class='bx bx-right-arrow-alt ms-2'></i></button> </div> </div> </div><!---end row--> </div> <div id="test-l-3" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger3"> <h5 class="mb-1">Crime Evidence</h5> <p class="mb-4">Upload Photo of the Crime</p> <div class="row g-3"> <!-- Upload evidence photo --> <div class="row"> <div class="col-xl-9 mx-auto"> <hr/> <div class="card"> <div class="card-body"> <input id="image-uploadify" name="image" type="file" accept=".jpg, .png, image/jpeg, image/png" multiple> </div> </div> </div> </div> <!-- End Upload evidence photo --> <div class="col-12"> <div class="d-flex align-items-center gap-3"> <button class="btn btn-outline-secondary px-4" onclick="stepper1.previous()"><i class='bx bx-left-arrow-alt me-2'></i>Previous</button> <button class="btn btn-primary px-4" onclick="stepper1.next()">Next<i class='bx bx-right-arrow-alt ms-2'></i></button> </div> </div> </div><!---end row--> </div> <div id="test-l-4" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger4"> <h5 class="mb-1">Crime Information</h5> <p class="mb-4">Enter Details of the Crime</p> <div class="row g-3"> <div class="col-12 col-lg-6"> <label for="Experience1" class="form-label">Suspect Name</label> <input type="text" class="form-control" name="suspect_name" id="Experience1" placeholder="Suspect Name"> </div> <div class="col-12 col-lg-6"> <label for="Position1" class="form-label">Assigned To</label> <input type="text" class="form-control" name="assigned_to" id="Position1" placeholder="Assigned To"> </div> <div class="col-12 col-lg-6"> <label for="Experience2" class="form-label">Action Taken</label> <textarea class="form-control" name="action_taken" id="input23" placeholder="Action Taken ..." rows="3"></textarea> </div> <div class="col-12 col-lg-6"> <label for="PhoneNumber" class="form-label">Additional Comments</label> <textarea class="form-control" name="additional_comments " id="input23" placeholder="Additional Comments..." rows="3"></textarea> </div> <div class="col-12"> <div class="d-flex align-items-center gap-3"> <button class="btn btn-primary px-4" onclick="stepper1.previous()"><i class='bx bx-left-arrow-alt me-2'></i>Previous</button> <button type="submit" class="btn btn-success px-4" >Submit</button> </div> </div> </div><!---end row--> </div> </form> </div> @endsection```
