Livewire Autofill Input Box Based On Drop Down Selection

Question

hello im new for livewire I'm trying to get input value based on dropdown value. when i select example drop-down value TOMATO in input show its price. i done this using jQuery but I want operate it in livewire without jQuery.

Single table having only two fields.

id	vegetable_name	vegetable_price
1	tomato	1$
2	onion	2$

Drop-down view and input

<div class="form-control-wrap">
 <select name="student_course" required>
   @foreach ($Itemlist as $key=>$Itemlists) 
     <option value="{{ $Itemlists->vegetable_name}}">
       {{ $Itemlists->vegetable_name}}
     </option>
   @endforeach
 </select>
</div>

i want to show price hear

<input name="vegetable_price"><input>

my controller

public function render()
{
    $Itemlist= StoreItem::get();
    return view('livewire.Item_Form',compact('Itemlist'));
}

score 1 · Accepted Answer · answered Jul 08 '23 at 19:49

in your livewire view file add livewire's wire:model property so your blade will look like below.

<div class="form-control-wrap">
 <select name="student_course" required wire:model="vegetable">
   @foreach ($Itemlist as $key=>$Itemlists) 
     <option value="{{ $Itemlists->vegetable_name}}">
       {{ $Itemlists->vegetable_name}}
     </option>
   @endforeach
 </select>
</div>

<input name="vegetable_price" wire:model.defer="vegetable_price"><input>

and inside your controller you can use updated hook for your wire:model property, also declare your both properties in the top of livewire class so your whole controller will look like this.

public $vegetable;
public $vegetable_price;


public function render()
{
    $Itemlist= StoreItem::get();
    return view('livewire.Item_Form',compact('Itemlist'));
}

public function updatedVegetable()
{
    $vegetableInfo = DB::table('vegetables')->where('id', $this->vegetable)->firts();
    $this->vegetable_price = $vegetableInfo->vegetable_price;
}

I assumed you have table with name vegetables

Livewire Autofill Input Box Based On Drop Down Selection

1 Answers1