Laravel Livewire project. Created a dynamic form with conditional fields. Need to add input field type=text when choosing the business type after choosing the business kind ( online/ physical). I've asked on many forums, people gave several instructions, but I'm finding it kinda difficult since I'm not quite experienced when it comes to PHP.
namespace App\Http\Livewire;
use App\Models\Classes;
use App\Models\Section;
use Livewire\Component;
class Conditional extends Component
{
public $parents = [];
public $children = [];
public function mount()
{
$this->parents = [
['id' => -1, 'title' => 'Select type'],
['id' => 1, 'title' => 'Physical Store'],
['id' => 2, 'title' => 'Online Shop'],
];
}
public function onSelectFirst($option)
{
switch($option) {
case '-1': {
$this->children = [];
break;
}
case '1': {
$this->children = [
['id' => -1, 'title' => 'Please select'],
['id' => 1, 'title' => 'Restaurant'],
['id' => 2, 'title' => 'Fast Food'],
['id' => 3, 'title' => 'Cafe'],
['id' => 4, 'title' => 'Bar'],
['id' => 5, 'title' => 'Night club'],
['id' => 6, 'title' => 'Other'], // here
];
break;
}
case '2': {
$this->children = [
['id' => -1, 'title' => 'Please select'],
['id' => 7, 'title' => 'Clothes'],
['id' => 8, 'title' => 'Food Delivery'],
['id' => 9, 'title' => 'Other'], // here
];
break;
}
}
}
public function render()
{
return view('livewire.conditional');
}
}
<x-jet-label for="business_kind" value="{{ ('Type')}}" />
<select name="business_kind" id="business_kind" wire:click="onSelectFirst($event.target.value)" wire:change="onSelectFirst($event.target.value)">
@foreach($parents as $option)
<option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
@endforeach
</select>
<x-jet-label for="business_type" value="{{ ('Business type')}}"/>
<select id="business_type" name="business_type" wire:loading.attr="disabled"'>
@foreach($children as $option)
<option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
@endforeach
</select>
</div>
CodePudding user response:
Look, I reproduce your example and this works well.
public $parents = [];
public $selectedParent;
public $children = [];
public $selectedChildren;
public $isVisible = false;
public function mount()
{
$this->parents = [
['id' => -1, 'title' => 'Select type'],
['id' => 1, 'title' => 'Physical Store'],
['id' => 2, 'title' => 'Online Shop'],
];
}
public function render()
{
return view('livewire.select-composer')
->layout('layouts.app');
}
public function updatedSelectedChildren($option)
{
if (($this->selectedParent == 1 && $option == 6) || ($this->selectedParent == 2 && $option == 9)) {
$this->isVisible = true;
} else $this->isVisible = false;
}
public function updatedSelectedParent($option)
{
$this->selectedChildren = -1;
$this->isVisible = false;
switch($option) {
case '-1': {
$this->children = [];
break;
}
case '1': {
$this->children = [
['id' => -1, 'title' => 'Please select'],
['id' => 1, 'title' => 'Restaurant'],
['id' => 2, 'title' => 'Fast Food'],
['id' => 3, 'title' => 'Cafe'],
['id' => 4, 'title' => 'Bar'],
['id' => 5, 'title' => 'Night club'],
['id' => 6, 'title' => 'Other'], // here
];
break;
}
case '2': {
$this->children = [
['id' => -1, 'title' => 'Please select'],
['id' => 7, 'title' => 'Clothes'],
['id' => 8, 'title' => 'Food Delivery'],
['id' => 9, 'title' => 'Other'], // here
];
break;
}
}
}
and the blade component
<div class="d-flex">
{{-- <x-jet-label for="business_kind" value="{{ ('Type')}}" />--}}
<div wire:key="select-parent" wire:ignore.self>
<select id="business_kind" wire:model="selectedParent">
@foreach($parents as $option)
<option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
@endforeach
</select>
</div>
{{-- <x-jet-label for="business_type" value="{{ ('Business type')}}"/>--}}
<div wire:key="select-children">
<select id="business_type" wire:loading.attr="disabled" wire:model="selectedChildren">
@foreach($children as $option)
<option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
@endforeach
</select>
</div>
@if($isVisible)
<input type="text" class="form-control" value="Done!">
@endif
</div>