?php? Modal

[ruiva21 0]

Bom dia galera, estou tentado editar usuários por meio de um modal, mas ele não está chamando os campos devidamente. Primeira postagem minha e já vai um mega código rs. Quem puder dar uma força aí eu agradeço muito !

 

Print do código php que seleciona os usuários cadastrados e mostra as opções de edição e exclusão abaixo.

 

 

 

 

 

 

[Omar~ 87]

Basicamente o que tens de fazer é uma função que receberá como parâmetro cada value do(s) input(s) dentro do form, a mesma função se encarrega de inserir esses valores dentro de cada input.

 

Como eu já fiz uma ótima classe JS para modal vou apresentar o exemplo usando ela.

Arquivos usados ModalShow

 

Como primeiro passo insiro os arquivos e crio a arquitetura do modal:

<script src="ModalShow.js" type="text/javascript"></script>
<link href="ModalShow.css" rel="stylesheet" type="text/css"/>

<div class="modal" id="editar-usuario">
    <div class="modal-box">
        <div class="modal-header"></div>
        <div class="modal-content">
        </div>
    </div>
</div>

Note que o modal deve possuir um atributo #ID ao qual a classe vai saber qual modal é para gerenciar.

 

Dentro do classificador modal-content coloco o formulário; aqui vou usar só um input para simplificar.

<form method="post" action="arquivo_de_post.php">
    <input type="text" name="identificador" id="id-user" value="" />
    <button type="submit">Validar Formulário</button>
</form>

Então através do evento onclick aciono uma função enviando como parâmetro o id do usuário ao qual poderia ser outros dados.

Dentro da função ataco o input preenchendo seu atributo value com o parâmetro recebido, logo então exibo o modal.

 

Vejamos o exemplo completo:

<script src="ModalShow.js" type="text/javascript"></script>
<link href="ModalShow.css" rel="stylesheet" type="text/css"/>

<?php
$idDoUsuario = 10; // Simulando um ID do usuário recebido de uma query por exemplo
?>
<button onclick="EditarUsuario('<?= $idDoUsuario ?>');">Editar usuário</button>

<!-- Arquitetura do modal -->
<div class="modal" id="editar-usuario">
    <div class="modal-box">
        <div class="modal-header"></div>
        <div class="modal-content">

            <!-- Formulário -->
            <form method="post" action="arquivo_de_post.php">
                <!--
                esse input poderia ser type="hidden"
                coloquei text para melhor entendimento
                -->
                <input type="text" name="identificador" id="id-user" value="" />

                <button type="submit">Validar Formulário</button>
            </form>
            <!-- Fim do formulário -->

        </div>
    </div>
</div>
<!-- Fim da arquitetura do modal -->

<script>
    function EditarUsuario(id) {
        document.getElementById('id-user').value = id;
        EditarUsuario.prototype = new ModalShow('editar-usuario', false);
        EditarUsuario.prototype.open('Título para o modal', true);
    }
</script>

 

 

 

No entanto acredito que o melhor caminho como são vários inputs eu optaria por usar ajax.

Que ao acionar o modal carregaria um arquivo internamente da janela informando algum dado.

Esse arquivo faria uma consulta SQL para trazer os dados do usuário assim preenchendo cada input.

Se quiser um exemplo fazendo isso está aqui:

https://drive.google.com/file/d/1HEg_houJ4WO-YbHgGUwtrLQ39GnhZZiW/view?usp=sharing