0

Bom dia pessoal!

Gostaria de uma ajuda... tenho uma div modal, que me abre um pequeno formulário para preenchimento.

O que eu preciso fazer: preencher esse formulário de forma dinâmica! Ou seja, ao abrir o modal o usuário visualiza somente o primeiro campo, que é a descrição, preenche o mesmo e aperta um botão de ok para avançar!

Com isso, ele avança pro segundo campo que é a escolha da cor. O campo de descrição nesse momento sumiu da tela. Ele visualiza agora somente a escolha da cor. Dá novamente um ok e somente então ele vai pra seleção do tipo de categoria, onde após preenchê-lo irá gravar os registros no banco.

Resumindo, tenho um formulário com três campos e preciso quebrá-lo em três etapas dentro dessa div modal.

Agradeço a ajuda, pois não tenho nem ideia de por onde começar.

Obrigado!

     <div class="modal fade" id="incluir" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content animated flipInX">
                            <div class="modal-body">    
                                <form method="POST" form action="<?=$_SERVER["PHP_SELF"]?>" enctype="multipart/form-data">

                                    <!-- INSERÇÃO DA DESCRIÇÃO! -->
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">Nome:</label>
                                        <input name="categoria" type="text" class="form-control" required="">
                                    </div>

                                    <!-- INSERÇÃO DA COR! -->
                                    <div class="form-group">    
                                        <label for="recipient-name" class="control-label">Cor:</label><p>
                                        <input type="color" name="cor" id="cor" list="cor" value="#FF0000" required="">
                                        <datalist id="cor">
                                        <option value="#FF0000">Vermelho</option>
                                        <option value="#FFA500">Laranja</option>
                                        <option value="#FFFF00">Amarelo</option>
                                        <option value="#008000">Verde</option>
                                        <option value="#0000FF">Azul</option>
                                        <option value="#4B0082">Indigo</option>
                                        <option value="#EE82EE">Violeta</option>
                                        </datalist> 
                                    </div>

                                    <!-- TIPO DA CATEGORIA! -->
                                    <div class="form-group">
                                        <div class="i-checks">
                                        <label for="recipient-name" class="control-label"> 
                                        <input type="radio" value="Receita" name="tipo" class="form-control" required=""> Receita</label></div>

                                        <div class="i-checks">
                                        <label for="recipient-name" class="control-label"> 
                                        <input type="radio" value="Despesa" name="tipo" class="form-control" required=""> Despesa</label></div>
                                    </div>  

                                    <!-- INSERÇÃO DO VALOR PARA ID DA TABELA E BOTÃO DE CONFIRMAR! -->
                                    <div class="modal-footer">
                                        <input type="hidden" value="-1" name="id" >
                                        <button class="btn btn-primary btn-circle btn-lg" type="submit"><i class="fa fa-check"></i>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
    </div>
    <!-- FIM DO MODAL DE INSERÇÃO! -->
2
  • Ta usando Bootstrap e jQuery?
    – LeAndrade
    Commented 9/04/2020 às 16:07
  • Sim, estou executando os dois! Commented 9/04/2020 às 16:14

1 Resposta 1

0

Pode fazer como no exemplo abaixo, que utilizei os métodos Jquery show() e hide() para ir mostrando/escondendo os elementos conforme o clique nos botões de ok:

$(() => {
  var verifica = false;                // variável que faz o controle
  $('.modal-footer').hide();
  $('.color').hide();
  $('.checks').hide();
  
  $('.pass').on('click', () => {
    verifica = !verifica;              // nega o valor da variável de controle
    
    if(verifica) {
      $('.color').show();
      $('.descricao').hide();
    } else {
      $('.checks').show();
      $('.color').hide();
      $('.modal-footer').show();
    }
  })
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#incluir">
  Abrir modal de demonstração
</button>

<div class="modal fade" id="incluir" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content animated flipInX">
      <div class="modal-body">
        <form method="POST">

          <!-- INSERÇÃO DA DESCRIÇÃO! -->
          <div class="form-group descricao">
            <label for="recipient-name" class="control-label">Nome:</label>
            <input name="categoria" type="text" class="form-control" required>
            <button class="btn btn-success pass mt-3">OK</button>
          </div>

          <!-- INSERÇÃO DA COR! -->
          <div class="form-group color">
            <label for="recipient-name" class="control-label">Cor:</label>
            <p>
              <input type="color" name="cor" id="cor" list="cor" value="#FF0000" required>
              <datalist id="cor">
                 <option value="#FF0000">Vermelho</option>
                 <option value="#FFA500">Laranja</option>
                 <option value="#FFFF00">Amarelo</option>
                 <option value="#008000">Verde</option>
                 <option value="#0000FF">Azul</option>
                 <option value="#4B0082">Indigo</option>
                 <option value="#EE82EE">Violeta</option>
              </datalist> <br>
              <button class="btn btn-success pass mt-3">OK</button>
          </div>

          <!-- TIPO DA CATEGORIA! -->
          <div class="form-group checks">
            <div class="i-checks">
              <label for="recipient-name" class="control-label"> 
                <input type="radio" value="Receita" name="tipo" class="form-control"> Receita
              </label>
            </div>

            <div class="i-checks">
              <label for="recipient-name" class="control-label"> 
                <input type="radio" value="Despesa" name="tipo" class="form-control" required> Despesa
              </label>
            </div>
          </div>

          <!-- INSERÇÃO DO VALOR PARA ID DA TABELA E BOTÃO DE CONFIRMAR! -->
          <div class="modal-footer">
            <input type="hidden" value="-1" name="id">
            <button class="btn btn-primary btn-circle btn-lg" type="submit"><i class="fa fa-check"></i> Enviar</button>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>
<!-- FIM DO MODAL DE INSERÇÃO! -->

2
  • Excelente, é isso que preciso! Vou adaptar! Muito obrigado pela ajuda! Commented 9/04/2020 às 16:41
  • Legal que ajudou man, sucesso aí!
    – LeAndrade
    Commented 9/04/2020 às 17:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .