dropdown box using Laravel 8 jetstream

Viewed 294

How can I make a dependent dropdown country ,state,city country, state, and city in user ragistration registration using laravel Laravel 8 jetstream .. ?JetStream?

1 Answers

Assuming you are using the Livewire + Blade Stack, as per the official documentation:

Each of these templates will receive the entire authenticated user object so that you can add additional fields to these forms as necessary. Any additional inputs added to the forms will be included in the $input array that is passed to your UpdateUserProfileInformation action.

The above means that you will need some vanilla Laravel, HTML (or Blade partial) and a Livewire model tag.

  1. Add any necessary migration to the users table.
  2. Add in the given $fillable property to the User model:
//app/Models/User.php
/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
 protected $fillable = [
    ...
    'city', //Assuming new column name is city
    ...
 ];
  1. Add in any input validation logic and the property it will be saved to on App\Actions\Fortify\UpdateUserProfileInformation action class.
//app/Actions/Fortify/UpdateUserProfileInformation.php

            $user->forceFill([
                ...
                'city' => $input['city'],
                ...
            ])->save();
  1. Modify resources/views/profile/update-profile-information-form.blade.php to include the HTML or partial that renders the dropdown select box:
//resources/views/profile/update-profile-information-form.blade.php
//Assuming the column name is 'city'
//Assuming you are not using a Blade partial

<div class="col-span-6 sm:col-span-4">
    <x-jet-label for="city" value="{{ __('City') }}" />
    <select 
        name="city"
        id="city"
        class="block w-full mt-1"
        wire:model.defer="state.city"
        >
        <optgroup label="Ontario">
            <option value="toronto">Toronto</option>
            <option value="markham">Markham</option>
        </optgroup>
        <optgroup label="Quebec">
           <option value="montreal">Montreal</option>
           <option value="qc">Quebec City</option>
        </optgroup>
    </select>

Please notice that Livewire should take care of any data bindings via the tag wire:model.defer="state.city".

Related