How to create a form where it stores the data in a table and at the end you can register the data in the table in the Database?

Question

I am creating a form where you register by entering 5 data (5 fields), and then when pressing the "Add" button, this data would be added in a "table" below where it shows your number, name and can be edited or removed, while the other 5 fields are empty to add more data, and so until the user click on "Register" where he would register all the "table" data in the database.

<div class="content">
   <div class="container">
      <div class="row">
         <?php require_once 'templates/message.php';?>
         <div id="div-superior" class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
            <div id="registro-publico" class="row btn-c well">
               <form class="form-horizontal" role="form">
                  <!-- CONTEÚDO AQUI  !-->
                  <!-- BUTTON !-->
                  <div class="form-group">
                     <div class="col-sm-offset-2 col-sm-10">
                        <button id="buttons" type="submit" class="btn btn-default">Cancelar </button>
                        <button id="buttons" type="submit" class="btn btn-default">Adicionar</button>
                     </div>
                  </div>
               </form>
            </div>
            <div id="div-button-cad">
               <button id="button-cad" type="submit" class="btn btn-default">Cadastrar</button>
            </div>
            <div id="div-table-quiz-public">
               <!-- TABELA AQUI !-->
            </div>
         </div>
      </div>
   </div>
</div>
<!-- /container -->

The code is that way. I can not imagine how to do this table interaction, in fact I just need to be able to click on "Add" to be able to insert new data only then, when clicking on "Register" can be inserted all the data in the BD. It is necessary that the user can enter several data according to his will before registering.

I did a lot of research and found nothing related to it. So I don’t know how to start this part.

Answer 1

You can use the tabletojson.js to add all your table to the database.

To insert values into a table before saving, follow the suggestion below, for you to analyze

$('.btn-default').on('click', function(){
  adicionarItemTable();
});

function adicionarItemTable() {

            var email    = $('#email').val();
            var nome     = $('#nome').val();
            var telefone = $('#telefone').val();
            var endereco = $('#endereco').val();
            var bairro = $('#bairro').val();

            var linha = "" +
                "<tr>" +
                   "<td>"+email+"</td>"+
                   "<td>"+nome+"</td>"+
                   "<td>"+telefone+"</td>"+
                   "<td>"+endereco+"</td>"+
                   "<td>"+bairro+"</td>"+
                "  <td><a href='#div' class='btn btn-danger btn-remove btn-xs'>remover</a></td>"+
                "</tr>";
            $('.tbody').append( linha );
            $('#nome').val('');
            $('#email').val('');
            $('#telefone').val('');
            $('#endereco').val('');
            $('#bairro').val('');

        }
        
        $(".tbody").on("click", ".btn-remove", function(e){
            $(this).closest('tr').remove();
            
        });

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" width="80%">
<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input  class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="nome">Nome</label>
    <input type="nome" class="form-control" id="nome">
  </div>
  <div class="form-group">
    <label for="telefone">Telefone:</label>
    <input class="form-control" id="telefone">
  </div>
  <div class="form-group">
    <label for="endereco">Endereco:</label>
    <input class="form-control" id="endereco">
  </div>
  <div class="form-group">
    <label for="bairro">bairro</label>
    <input class="form-control" id="bairro">
  </div>
  
  <a href="#" class="btn btn-success">Adicionar</a>
</form>
</div>

<table class="table table-responsive table-stripped">
  <thead>
     <tr>
       <td>email</td>
       <td>Nome</td>
       <td>Telefone</td>
       <td>Endereço</td>
       <td>Senha</td>
     </tr>
  </thead>
  <tbody class="tbody">
  </tbody>
</table>

<button href="#" class="btn btn-primary">Salvar</button>

Answer 2

Would do so to popular the table with Jquery:

<form id='meuForm'>
  <input type="text" id="input1" value="teste1">
  <input type="text" id="input2" value="teste2">
  <input type="text" id="input3" value="teste3">
  <input type="text" id="input4" value="teste4">
  <input type="text" id="input5" value="teste5">
  <input type='button' id='btnCad' value='Enviar'>
</form>

<div id="div-table-quiz-public">  
  <table id="minhaTabela" style='width:100%'>
    <thead>
      <tr>
        <th>Input1</th>
        <th>Input2</th>
        <th>Input3</th>
        <th>Input4</th>
        <th>Input5</th>
      </tr>
    </thead>
    <tbody></tbody>
</table>

<input type="button" id="transferirDados" value="Gravar">

<!-- Javascript / Jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$("#btnCad").click( function(){

      var input1 = $("#input1").val();
      var input2 = $("#input2").val();
      var input3 = $("#input3").val();
      var input4 = $("#input4").val();
      var input5 = $("#input5").val();

      $('#minhaTabela tbody:last-child').append('<tr><td>' + input1  + '</td><td>' + input2  + '</td><td>' + input3  + '</td><td>' + input4  + '</td><td>' + input5  + '</td></tr>');

       $("#meuForm input[type=text]").val('');
});
</script>

Test in Codepen.io

Now, to transfer table data to your page, make use of Json, thus:

<script>
$('#transferirDados').click( function() {
    var tabela = $('#minhaTabela).tableToJSON();
    $.ajax({
        type:'POST',
        url: "URL_DESTINO.PHP",
        data: {dados: tabela},
        success: function(data) {
            $('#elementoShowRetorno').html(data);
            console.log(data);
        }
    });
});
</script>

Remember: Data will be transferred as Json, you will need to make use of json_decode(); in your PHP file, or Json Code in the programming language you are developing your application for.