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! -->