How can I dynamically display the quantity of items from the 'item_amount' column when a product name is selected from the 'item_name' dropdown menu in Laravel 11, based on the data stored in the database?
Database
| id | item_code | item_name | item_amount |
|---|---|---|---|
| 1 | 001 | Pena | 67 |
| 2 | 003 | Palu | 45 |
item.blade.php
<!-- another code -->
<div class="form-group">
<label for="item_name" class="col-sm-4 control-label">Pilih Barang</label>
<div class="col-sm-12">
<select class="form-control" id="item_name" name="item_name" required>
<option value="" disabled selected>Pilih Barang</option>
@foreach($item as $i)
<option value="{{ $i->id }}">{{ $i->item_name }}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<label for="item-amount" class="col-sm-5 control-label">Jumlah Barang Tersedia</label>
<div class="col-sm-12">
{{ $item->item_amount }}
</div>
</div>
<!-- another code -->
DemandController
/**
* Display a listing of the resource.
*/
public function index(Request $request)
{
if ($request->ajax()) {
$demand = Demand::select('*');
return DataTables::of($demand)
->addIndexColumn()
->addColumn('action', function ($row) {
$edit_btn = '<button ' .
' class="btn btn-info" ' .
' onclick="editItem(' . $row->id . ')">Ubah' .
'</button> ';
$del_btn = '<button ' .
' class="btn btn-danger" ' .
' onclick="deleteItem(' . $row->id . ')">Hapus' .
'</button> ';
return $edit_btn . $del_btn;
})
->rawColumns(['action'])
->make(true);
}
$item = Item::all();
$item_amount = Item::select('item_amount')->get();
return view('demand', compact('item', 'item_amount'));
}
Models/Item
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
use HasFactory;
protected $table = 'item';
protected $fillable = [
'item_code', 'item_name', 'item_amount', 'item_unit', 'item_department'
];
public function supplies()
{
return $this->hasMany(Supply::class);
}
public function demands()
{
return $this->hasMany(Demand::class);
}
}
Models/Demand.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Demand extends Model
{
use HasFactory;
protected $table = 'demand';
protected $fillable = [
'item_id', 'user_id', 'sent_out', 'is_verify'
];
public function item()
{
return $this->belongsTo(Item::class);
}
public function user()
{
return $this->belongsTo(User::class);
}
}
routes/web.php
<?php
use App\Http\Controllers\DemandController;
use App\Http\Controllers\ItemController;
use App\Http\Controllers\RecruitmentsController;
use App\Http\Controllers\SupplyController;
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::resource('recruitments', RecruitmentsController::class);
Route::resource('item', ItemController::class);
Route::resource('demand', DemandController::class);
Route::resource('supply', SupplyController::class);
Route::resource('users', UserController::class);
Problem Statement
My issue lies in the lack of real-time updating and failure to match the database content.
I aim to have the 'item_amount' value automatically update in real-time upon selecting a product name from a dropdown selector, utilizing Laravel and AJAX for modal.