In this section, I will implements how we can set laravel select categories to subcategories using jquery ajax i am using laravel 8 version
you can use 5+ to any but remember Routes.
Create Laravel Project
composer create-project --prefer-dist laravel/laravel larainfo
php artisan make:model Category -m
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
$table->string('category_name');
$table->timestamps();
});
}
php artisan make:model Subcategory -m
public function up()
{
Schema::create('subcategories', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('category_id');
$table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
$table->string('name');
$table->timestamps();
});
}
Category.php make simple one to many relationship
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
use HasFactory;
protected $fillable = ['category_name'];
public function subcategory()
{
return $this->hasMany(Subcategory::class);
}
}
Subategory.php make simple one to many relationship
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Subcategory extends Model
{
use HasFactory;
protected $fillable = ['name', 'category_id'];
public function category()
{
return $this->belongsTo(Category::class);
}
}
next make Category and Subcategory Controller
CategoryController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\Category;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$categories = Category::get();
return view('admin.category.index', compact('categories'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('admin.category.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'category_name' => 'required|unique:categories'
]);
Category::create([
'category_name' => $request->category_name,
]);
return redirect()->route('category.index');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$category = Category::find($id);
return view('admin.category.edit', compact('category'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$category = Category::find($id);
$category->category_name = $request->category_name;
$category->save();
return redirect()->route('category.index');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$category = Category::find($id);
$category->delete();
return redirect()->route('category.index');
}
}
SubCategoryController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\Subcategory;
use Illuminate\Http\Request;
class SubCategoryController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$subcategories = Subcategory::get();
return view('admin.subcategory.index', compact('subcategories'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('admin.subcategory.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required|min:3',
'category' => 'required'
]);
Subcategory::create([
'name' => $request->name,
'category_id' => $request->category
]);
notify()->success('Subcategory created successfully!');
return redirect()->back();
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$subcategory = Subcategory::find($id);
return view('admin.subcategory.edit', compact('subcategory'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$subcategory = Subcategory::find($id);
$subcategory->name = $request->name;
$subcategory->category_id = $request->category;
$subcategory->save();
notify()->success('Subcategory updated successfully!');
return redirect()->route('subcategory.index');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$subcategory = Subcategory::find($id);
$subcategory->delete();
notify()->success('Subcategory deleted successfully!');
return redirect()->route('subcategory.index');
}
}
In Web.php
<?php
use App\Http\Controllers\Admin\CategoryController;
use App\Http\Controllers\Admin\DashboardController;
use App\Http\Controllers\Admin\ProductController;
use App\Http\Controllers\Admin\SubCategoryController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::group(['prefix' => 'admin', 'middleware' => ['auth']], function () {
Route::resource('category', CategoryController::class);
Route::resource('subcategory', SubCategoryController::class);
Route::resource('products', ProductController::class);
Route::get('subcatories/{id}', [ProductController::class, 'loadSubCategories']);
});
Now We use Category to Subcategory Store In products we can create Product Crud and Add you logic
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container">
<div class="col-lg-10">
<form action="{{route('products.store')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="card mb-6">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Create Product</h6>
</div>
<div class="card-body">
<div class="form-group">
<label for="">Name</label>
<input type="text" name="name" class="form-control @error('name') is-invalid @enderror "
id="" aria-describedby="" placeholder="Enter name of product">
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group">
<label for="">Description</label>
<textarea name="description" id=""
class="form-control @error('description') is-invalid @enderror "></textarea>
@error('description')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input @error('image') is-invalid @enderror "
id="customFile" name="image">
<label class="custom-file-label " for="customFile">Choose file</label>
@error('image')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="">Price($)</label>
<input type="number" name="price"
class="form-control @error('price') is-invalid @enderror " id=""
aria-describedby="">
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group">
<label for="">Choose Category</label>
<select name="category" class="form-control @error('category') is-invalid @enderror">
<option value="">select</option>
@foreach(App\Models\Category::all() as $key=> $category)
<option value="{{$category->id}}">{{$category->category_name}}</option>
@endforeach
</select>
@error('category')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group">
<label for="">Choose Subcategory</label>
<select name="subcategory"
class="form-control @error('subcategory') is-invalid @enderror">
<option value="">select</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function () {
$('select[name="category"]').on('change', function () {
var catId = $(this).val();
if (catId) {
$.ajax({
url: '/admin/subcatories/' + catId,
type: "GET",
dataType: "json",
success: function (data) {
$('select[name="subcategory"]').empty();
$.each(data, function (key, value) {
$('select[name="subcategory"]').append('<option value=" ' + key + '">' + value + '</option>');
})
}
})
} else {
$('select[name="subcategory"]').empty();
}
});
});
</script>
</body>
</html>