Dynamic form filling within modal div

Question

Good morning, everyone!

I would like some help... I have a modal div, which opens me a short form to fill out.

What I need to do: fill out this form dynamically! That is, when opening the modal the user views only the first field, which is the description, fills the same and presses an ok button to advance!

With this, he advances to the second field which is the choice of color. The description field at that time has disappeared from the screen. It now views only the choice of color. Gives again an ok and only then it goes to the selection of category type, where after filling it will record the records in the database.

In short, I have a form with three fields and I need to break it into three steps within this modal div.

I appreciate the help, because I have no idea where to start.

Thank you!

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

Answer 1

You can do as in the example below, that I used the methods Jquery show() and Hide() to show/hide the elements as you click on the 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! -->