0

Estou criando um formulário onde você faz um cadastro inserindo 5 dados(5 campos), e então ao apertar o botão "Adicionar", esses dados seria adicionados em um "table" abaixo onde mostra o seu número, nome e possa ser editado ou removido, enquanto os outros 5 campos ficam vazios para adicionar mais dados, e assim até o usuário clicar em "Cadastrar" onde ele cadastraria todos os dados do "table" no banco.

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

O código está dessa forma. Não consigo imaginar como fazer essa interação da tabela, na verdade só preciso que seja possível clicar em "Adicionar" para poder inserir novos dados para só então, quando clicar em "Cadastrar" poder ser inserido todos os dados no BD. É necessário que o usuário possa inserir vários dados de acordo com a vontade dele antes de cadastrar.

Pesquisei muito e não achei nada relacionado a isso. Então não sei como iniciar essa parte.

3
  • Cara, normalmente você faz o registro no banco de dados primeiro. Imagine, se o usuário sem querer dar um F5, ele perdeu o que fez que nem em memória do servidor está mais... Pensa bem se é isso mesmo que quer. 8/03/2018 às 19:28
  • Para esse caso é possível criar uma função para aparecer um "model" de confirmação caso ele aperte "F5" ou ele clique em "cancelar"? É preciso que ele cadastre tudo junto de alguma forma, ou que de para deletar caso ele clique em "cancelar". Mas ainda não sei uma forma para isso.
    – Anonn
    14/03/2018 às 15:11
  • É possível sim, ao sair da página o js consegue mostrar uma mensagem "se ele deseja realmente sair e que dados serão perdidos", mas sinceramente, isso pode causar um certo desconforto no usuário. Caso opte por isso mesmo assim, pesquise sobre o evento beforeUnload do js. 14/03/2018 às 16:13

2 Respostas 2

0

Você pode usar o tabletojson.js para adiconar toda a sua tabela no banco de dados.

Para inserir valores em uma tabela antes de salvar, segue a sugestão abaixo, para você analisar

$('.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>

1
  • Obrigado pela ajuda, testei o código e não funcionou, porém, apesar disso, fiquei interessado em saber o que exatamente é o " tabletojson.js", é minha primeira vez trabalhando com tabelas, então estou meio perdido.
    – Anonn
    13/03/2018 às 20:09
0

Faria assim para popular a tabela com 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>

Teste no Codepen.io

Agora, para transferir os dados da tabela para a sua página, faça uso de Json, assim:

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

Lembre-se: Os dados serão transferidos como Json, você precisará fazer uso do json_decode(); no seu arquivo PHP, ou decode de Json na linguagem de programação de que estiver desenvolvendo sua aplicação.

2
  • Não entendi a segunda parte, a função do "transferirDados", oque ela faz exatamente? Para onde ela vai transferir os dados? Pois da tabela, oque eu queria fazer é poder adicionar todos os dados na tabela no banco de dados. Nunca ouvi falar do "Json", fiquei meio confuso.
    – Anonn
    13/03/2018 às 20:04
  • Transfere os dados pra onde você quiser, para o arquivo de destino, através de $.ajax(); Veja, incrementei a resposta que dei para ver se melhora a sua compreensão.
    – ElvisP
    15/03/2018 às 21:26

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 .