How to deal with multiple select elements on one form and livewire page-CodePudding

Can you help me with how to deal with multiple select elements on one form and livewire page? I tried but when I change one and in a method like 'updatedDate' which is called after date changed the other two parameters 'city_from_id' and 'city_to_id' and others are null. How to deal with it? I need to make a form that will check available routes depending on two city params and one date parameter. And if all Ok then the user can fill up the rest of the form. But I can't find a way how to make it.

Date and cityFrom and cityTo are not dependent on each other, so users will get info when selecting all data or on changing some info another select box (CityFrom and CityTo) can be changed (profiled aveable values).

public $search;

public function mount()
{
    $this->search = ['date' => null, 'city_from_id' => null, 'city_to_id' => null];
}

and in blade file:

<form>
    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">{{__('site.bookings.date')}}</span>
        <input
            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400
                    focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
            wire:model.defer="search.date" type="date"/>
        @error('date')
        <div class="block w-full mt-1 text-sm text-red-600">{{ $message }}</div>
        @enderror
    </label>
    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">{{__('site.bookings.city_from')}}</span>
        <select class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700
                form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                wire:model.defer="search.city_from_id">
            <option value="">{{__('site.bookings.select_city_from')}}</option>
            @foreach($cities_from as $item)
                <option value="{{$item->id}}">{{$item->name}}</option>
            @endforeach
        </select>
        @error('city_from_id')
        <div class="block w-full mt-1 text-sm text-red-600">{{ $message }}</div>
        @enderror
    </label>
    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">{{__('site.bookings.city_to')}}</span>
        <select class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700
                form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                wire:model.defer="search.city_to_id">
            <option value="">{{__('site.bookings.select_city_to')}}</option>
            @foreach($cities_to as $item)
                <option value="{{$item->id}}">{{$item->name}}</option>
            @endforeach
        </select>
        @error('city_to_id')
        <div class="block w-full mt-1 text-sm text-red-600">{{ $message }}</div>
        @enderror
    </label>
</form>

CodePudding user response：

if you don't need real-time validation you can do it like so

add this to your form element

<form wire:submit.prevent="the name of the function you want">

and add button type submit if you did not add it for the form.

If you need real-time validation

you need -with the modifications above - to remove the defer modifier from every input, and add this to your component class

 public function updated($propertyName)
{
    $this->validateOnly($propertyName);
}

CodePudding user response：

if you use 'defer', you only can get the bind values on the next request, in your case you need some submission action to the backend and handle the data. Otherwise, without the 'defer', you can do something like this:

public function updatedSearchDate($value)
{
    $this->test();
}

public function updatedSearchCityFromId($value)
{
   $this->test();
}

public function updatedSearchCityToId($value)
{
   $this->test();
}

public function test()
{
   if ($this->search['date'] && $this->search['city_from_id'] && $this->search['city_to_id']) {
      dd('do something');
   } else {
      dd('do another thing');
   }
}

I mean, this way you can manage your events live and take action.