Button in a modal populated via JS not works

i’ve in my laravel 8 project a modal populated dynamically by clicking a row in a table, and in the footer of the modal i’ve an <input type="submit">.
But when I click on the button nothing happens, and I can’t figure out if the problem is due to how I created the form or if I’m wrong in the code.
Anyone have any suggestions? Where am I wrong?

here my code:

<tbody>
    @foreach ($users as $u)
        <tr wire:click='openModal({{ $u->id }})'>
            <td>{{ $u->username }}</td>
            <td>{{ $u->nome }}</td>
            <td>{{ $u->cognome }}</td>
            <td>{{ $u->email }}</td>
            <td>{{ $u->codicefiscale }}</td>
            <td>{{ $u->ruolo == 0 ? 'Admin' : 'Collaboratore' }}</td>
            <td>
                <div class="d-flex">
                    <a href="{{ url('tenants/' . $idt . '/users/'.$u->id.'/update') }}" class="btn btn-primary shadow btn-xs sharp mr-1" >
                        <i class="fa fa-pencil"></i>
                    </a>
                    <form method="POST" action="{{ url('tenants/' . $idt . '/users/impersonate') }}">
                        @csrf
                        <input type="hidden" value="{{ $u->id }}" name="idu">
                        <button type="submit" class="btn btn-success shadow btn-xs sharp">
                            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                        </button>
                    </form>
                    <form method="POST" action="{{ url('tenants/' . $idt . '/users/delete') }}">
                        @csrf
                        @method('delete')
                        <input type="hidden" value="{{ $u->id }}" name="idu">
                        <button type="submit" class="btn btn-danger shadow btn-xs sharp">
                            <i class="fa fa-trash"></i>
                        </button>
                    </form>
                </div>
            <td>
        </tr>
    @endforeach
</tbody>
<div class="modal fade" id="UtenteLongModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Dettagli dell'utente</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- da aggiungere l'azione -->
                <div class="basic-form">
                    <!-- modal popolato dallo script -->
                </div>
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
<script>
    window.addEventListener('open', event => {
        var url = '{{ url("tenants/:idt/users/:idu/resetPassword") }}';
        url = url.replace(':idt', event.detail.idt);
        url = url.replace(':idu', event.detail.user.id);
        url = url.replace('%3Aidu', '');

        $(".modal-body").empty();
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Username</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.username+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Nome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.nome+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cognome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cognome+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Email</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.email+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Codice Fiscale</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.codicefiscale+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Abilitato</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.abilitato+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Qualifica</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_qualifica+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ruolo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ruolo+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ufficio</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ufficio+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Indirizzo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.indirizzo+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Comune</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_comune+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Provincia</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_provincia+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">CAP</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cap+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cellulare</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cellulare+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Telefono</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.telefono+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Fax</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.fax+'" /></div></div>' );
        // $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Scrittura</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.scrittura+'" /></div></div>' );
        $(".modal-footer").empty();
        $(".modal-footer").append('<form id="resetPasswordForm" method="POST" action="'+url+'">');
        $(".modal-footer").append('@csrf()');
        $(".modal-footer").append('<input type="text" hidden name="idu" value="'+event.detail.user.id+'"/>');
        $(".modal-footer").append('<input type="submit" class="btn btn-primary" value="Resetta la password" />');
        $(".modal-footer").append('</form>');
        // document.getElementById("resetPasswordForm").submit();
        $("#UtenteLongModal").modal('show');
    })
</script>

I tested with console.log(url) if the generated url was correct and it is, and uncommenting document.getElementById("resetPasswordForm").submit (); in my script I go automatically (as it is correct to be) on the requested url with error 419.

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

Instead of

$(".modal-footer").append('@csrf()');

Try

$(".modal-footer").append('{{ csrf_field() }}');

I’m not sure the blade directive is working as it should there.

Method 2

You are appending the input fields of the form outside of the actual form. That’s why nothing will actually happen on a click action.

You have to append them like this (i’m using the user id to distinguish different forms from different modals when multiple users are on the table)

$(".modal-footer").append('<form id="resetPasswordForm' + event.detail.user.id + '" method="POST" action="'+url+'">');
$("#resetPasswordForm" + event.detail.user.id).append('@csrf()');
$("#resetPasswordForm" + event.detail.user.id).append('<input type="text" hidden name="idu" value="'+event.detail.user.id+'"/>');
$("#resetPasswordForm" + event.detail.user.id).append('<input type="submit" class="btn btn-primary" value="Resetta la password" />');

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