Laravel Livewire, adding Input field (type=text) when chosing Other

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 AppHttpLivewire;

use AppModelsClasses;
use AppModelsSection;
use LivewireComponent;

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x