How To dynamically Update Select Option Input Form from other table

Hello,

I’m begining with Laravel 8 and I have made with livewire 2.0 a modal form to create users. In this form thereis a select list whose source is another table user-permissions.

I want to add a button for the select “role_id” in this modal form to open the create user-permission form to create an user permission when she doesn’t exist and update the select list and return to the first modal form.

Is it possible to do this ?

Thanks in advance for your help,

ATB

This the code of the first form :

@include(‘livewire.createUserPermissions’)

<div class="modal-dialog">

  <div class="modal-content" role="dialog">

    <div class="modal-header">

      <h5 class="modal-title" id="exampleModalLabel">Ajouter Un Utilisateur</h5>

      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

    </div>

    <div class="modal-body">

      <form>

        @csrf

          <div class="form-group">

                      

                <label> Nom Utilisateur <i class="bi bi-pen-fill" style="color: red">  </i></label>

                <input wire:model="name" type="text" class="form-control">

            

                @error('name')

                    <span class="error" style="color: red">

                            {{$message }}

                    </span>

                    <br>

                @enderror

          </div>

          <div class="form-group">

                <label> <i class="bi bi-envelope" style="color: green"> </i>Email <i class="bi bi-pen-fill" style="color: red">  </i></label>

                <input wire:model="email" type="text" class="form-control">

            

                @error('email')

                    <span class="error"style="color: red">

                        {{$message }}

                    </span>

                <br>

                @enderror

              </div>

                <div class="form-group">

                <label> Role <i class="bi bi-pen-fill" style="color: red">  </i></label>

                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ajoutUserPermissionsModal">

                  Ajouter Permission Utilisateur

                </button>

                

                  <select wire:model="role_id" name="role_id" id="role_id" class="custom-select">

                      <option value ="" selected>Quel rôle ?</option>

                      @foreach ($userpermissions as $userpermission)

                      <option value="{{ $userpermission->id }}"> {{ $userpermission->role }}</option>

                          

                      @endforeach

                    

                  </select> 

                  

                @error('role_id')

                  <span class="error"style="color: red">

                      {{$message }}

                  </span>

                  <br>

              @enderror

            </div> 

              <div class="form-group">

                

                <label>Mot de passe <i class="bi bi-pen-fill" style="color: red">  </i></label>

                <input wire:model="password" type="text" class="form-control">

            

                @error('password')

                    <span class="error"style="color: red">

                        {{$message }}

                    </span>

                <br>

                @enderror

            </div>

      </form>

    </div>

    <div class="modal-footer">

      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"  wire:click.prevent="resetInputFields()">Fermer</button>

      <button type="button" class="btn btn-primary" wire:click.prevent="store()">Ajouté un Utilisateur</button>

    </div>

  </div>

</div>
This the code of the second form :
<div class="modal-dialog">

  <div class="modal-content">

    <div class="modal-header">

      <h5 class="modal-title" id="exampleModalLabel">Ajouter Permission Utilisateur</h5>

      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

    </div>

    <div class="modal-body">

      <form>

        @csrf

          <div class="form-group">

                      

                <label>   Role<i class="bi bi-pen-fill" style="color: red">  </i></label>

                <input wire:model="role" type="text" class="form-control">

            

                @error('role')

                    <span class="error" style="color: red">

                            {{$message }}

                    </span>

                    <br>

                @enderror

          </div>

          <div class="form-group">

                <label> Nom de Route <i class="bi bi-pen-fill" style="color: red">  </i></label>

                <input wire:model="route_name" type="text" class="form-control">

            

                @error('route_name')

                    <span class="error"style="color: red">

                        {{$message }}

                    </span>

                <br>

                @enderror

                

            </div>

      </form>

    </div>

    <div class="modal-footer">

      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" wire:click.prevent="resetInputFields()">Fermer</button>

      <button type="button" class="btn btn-primary" wire:click.prevent="store()">Ajouté une permission</button>

    </div>

  </div>

</div>

hi!
You can crate in the controller listeners and emit changes from blade file or even from controller
Look at this video: https://www.youtube.com/watch?v=s6azm2W2xQc
br.
Gergely