Multi-step form not submitting to database

  Tue 23 / 04 / 2024

  Posted by: OG Designs

Category : Laravel

Tags : php , php laravel , web , backend , deployment

Description

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

```


View Code
                        Here is the Controller Code

```
        <?php

namespace App\Http\Controllers\Backend;

use Carbon\Carbon;
use App\Models\Crime;
use Nette\Utils\Image;
use App\Models\Category;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class CrimeController extends Controller
{
   public function AddCrime(){
    $categories = Category::latest()->get();
    return view('backend.crime.crime_add',compact('categories'));
   
   }   //End Method


   
public function StoreCrime(Request $request){
    $image = $request->file('image');
    $name_gen = hexdec(uniqid()).'.'.$image->getClientOriginalExtension();
    Image::make($image)->resize(784,436)->save('upload/crimes/'.$name_gen);
    $save_url = 'upload/crimes/'.$name_gen;

    Crime::insert([
        'category_id' => $request->category_id,
        'crime_date' => $request->crime_date,
        'crime_time' => $request->crime_time,
        'location' => $request->location,
        'description' => $request->description,
        'reported_by' => $request->reported_by,
        'status' => $request->status,
        'anonymous' => $request->anonymous,
        'crime_type' => $request->crime_type,
        'priority' => $request->priority,
        'police_report_number' => $request->police_report_number,
        'image' => $request->image,
        'suspect_name' => $request->suspect_name,
        'assigned_to' => $request->assigned_to,
        'action_taken' => $request->action_taken,
        'additional_comments' => $request->additional_comments,

        'image' => $save_url,
        'created_at' => Carbon::now(),  

    ]);

   $notification = array(
       'message' => 'Crime Submitted Successfully',
       'alert-type' => 'success'
   );

   return redirect()->route('all.category')->with($notification);
} //End Method
  
  
}

```
                
  Comment   Share
0 Likes   1 Comment


comment-author
OG Designs Author

Issue solved. The form is now working perfectly fine. Somebody from CDL Laravel WhatsApp group solved the issue for me. Thanks.



Reply


commented 2 months ago
comment-author
Hadayat Niazi Super Admin

Glad to hear from you that your problem is resolved, can you please mention what was the issue, so it will help others to solve that kind of error in future if they face. Thanks OG