laravel blade dynamic data binding, getting variable from other input selector

Question

I am trying to make dynamic(?) input forms.

I have two input selectors.

A seller selector, and a client selector.

The client selector depends on the seller selector.

Once the seller is selected, only his clients should be pop up in choices for the client selector.

So I need to pass on selected seller info to the client selector, which is on the same page.

Right now, all clients show.

But, here is the code

<div class="card-body">
                        <form method="post" action="{{ route('sales.store') }}" autocomplete="off">
                            @csrf

                            <h6 class="heading-small text-muted mb-4">{{ __('Customer Information') }}</h6>
                            <div class="pl-lg-4">
                                <row>
                                    <div class="form-group{{ $errors->has('user_id') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-name">{{ __('Seller') }}</label>
                                        <select  name="user_id" id="input-seller" class="form-select form-control-alternative{{ $errors->has('client') ? ' is-invalid' : '' }}" required>
                                            <option value="{{Auth::id()}}">{{ Auth::user()->name }}</option>
                                            @foreach ($users as $user)
                                                @if($user->id != Auth::id())
                                                    @if($user->id == old('id'))
                                                        <option value="{{$user->id}}" selected>{{$user->name}}</option>
                                                    @else
                                                        <option value="{{$user->id}}">{{$user->name}}</option>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </select>
                                        @include('alerts.feedback', ['field' => 'client_id'])
                                    </div>
                                </row>
                                <row>

                                    <div class="form-group{{ $errors->has('client_id') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-name">{{ __('Client') }}</label>
                                        <select name="client_id" id="input-client_id" class="form-select form-control-alternative{{ $errors->has('client') ? ' is-invalid' : '' }}" required>
                                            @foreach ($clients as $client)
                                                @if($client['id'] == old('client'))
                                                    <option value="{{$client['id']}}" selected>{{$client['name']}}</option>
                                                @else
                                                    <option value="{{$client['id']}}">{{$client['name']}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                        @include('alerts.feedback', ['field' => 'client_id'])
                                    </div>
                                </row>


                                <button type="submit" class="btn btn-success mt-4">{{ __('Continue') }}</button>
                            </div>
                        </form>
                    </div>

I was thinking something along the lines of...

$seller_input = request->input('user_id');

@foreach ($clients as $client)
  @if($client['id'] == $seller_input)
    @if($client['id'] == old('client'))
        <option value="{{$client['id']}}" selected>{{$client['name']}}</option>
    @else
        <option value="{{$client['id']}}">{{$client['name']}}</option>
    @endif
  @endif
@endforeach

which of course doesn't work since we do not request the input yet.

or

using Livewire, Vue, Inertia, other library, stack, ...etc , which has double binding data features to get the work done.

Right now, I am not sure if it's even possible.

Please help.

How should I approach this problem?

You need some sort of JavaScript to get this to work. You can use Livewire, Vue, React, Angular, JQuery or just JavaScript by itself to get this to work. However what you will use and how you will use it goes beyond the scope of this site as it's a decision completely up to you based on your needs for this feature, what fits with the rest of your site and what you're more comfortable with using. — apokryfos, Mar 19 '22 at 09:01
@apokryfos I have decided to go with livewire. before, I tried alpinejs, but data passing to laravel blade was not possible. once I get it done with livewire I will post the answer here. thanks again! — hyukkyulee, Mar 19 '22 at 14:09

score 0 · Answer 1 · answered Mar 20 '22 at 08:36

Here is the solution using livewire on top of laravel.

Important part is data binding using

wire:model="wired"

and make sure to apply any script upon livewire:update.

<script>
        document.addEventListener('livewire:update', function () {
            // Your JS here.
            new SlimSelect({
                select: '#selector-01'
            })
            new SlimSelect({
                select: '#selector-01'
            })
        })
</script>

ps. you don't have to touch route or controller. only adding livewire component using @livewire('component-name') directive to existing blade.php would get the work done.

laravel blade dynamic data binding, getting variable from other input selector

1 Answers1