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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm creating a form where you make a record by entering 5 data (5 fields), and then by 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 clicks "Register" where he would register all the data of the table 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 figure out how to do this table interaction, in fact I only need to be able to click on "Add" to be able to insert new data for only then, when clicking on "Register" can be inserted all the data in the database. It is necessary that the user can enter several data according to his will before registering.

I researched a lot and did not find anything related to it. So I do not know how to start this part.

php sql

asked by anonymous 08.03.2018 / 20:24

2 answers

I can not add objects after ViewPager (image slider) How to echo the value of a variable from the query result

score 0 · Answer 1

You can use tabletojson.js to add your entire 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><linkhref="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>

score 0 · Answer 2

I would like to populate 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 on Codepen.io

Now, to transfer the table data to your page, use Json , like this:

<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: The data will be transferred as Json, you will need to make use of json_decode (); in your PHP file, or Json decode in the programming language of which you are developing your application.