Form with automatic save

Navigation
1

I am creating a form in tabs, which has 3 tabs and each one belongs to a table, was it possible to know if I have to save what was filled in a tab as soon as I switch to another tab without redirecting the page? 

<script>
$('button').on('click', function(btn){
console.log(btn.target.getAttribute('data-value'))
  $.ajax({
    url: 'salva.php',
    type: 'GET',
    error: function(err){console.error(err)},
    success: function(data){
  console.log(data);
    }
  });
});
</script>
    <div class="container theme-showcase" role="main">
        <div class="page-header">
            <h1>Cadastrar Usuario</h1>
        </div>          

          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#dados_pessoais" aria-controls="home" role="tab" data-toggle="tab" id="bt1" data-value="1">Dados Pessoais</a></li>
            <li role="presentation"><a href="#dados_de_acesso" aria-controls="dados_de_acesso" role="tab" data-toggle="tab" id="bt2" data-value="2">Dados de Acesso</a></li>    
          </ul>

          <!-- Tab panes -->
                    <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="dados_pessoais">
                                <div style="padding-top:20px;">
                                    <form class="form-horizontal" action="salva.php" method="POST">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Nome</label>
                                            <div class="col-sm-10">
                                                <input type="text" name='nome' class="form-control" id="nome" placeholder="Nome Completo" value="<?php if(isset($_SESSION['nome'])){ echo $_SESSION['nome']; }?>">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">CPF</label>
                                            <div class="col-sm-10">
                                                <input type="text" name='cpf' class="form-control" id="cpf" placeholder="CPF" value="<?php if(isset($_SESSION['cpf'])){ echo $_SESSION['cpf']; } ?>">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" name="enviar" class="btn btn-success">Cadastrar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="dados_de_acesso">
                                <div style="padding-top:20px;">
                                    <form class="form-horizontal"  action="salva.php" method="POST">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Usuario</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="usuario" placeholder="Usuário">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Senha</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" id="senha" placeholder="Senha">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" name="enviar2" class="btn btn-success">Cadastrar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
            </div>

                    </div>

    </div>

salva.php 

<?php include("conn.php"); 

        $sql = "SELECT * FROM usuarios";
                $result = $conn->query($sql);
                $row = $result->fetch_assoc();
            if(isset($_POST['enviar2'])){


                $usuario = $_POST['usuario'];
                $senha = $_POST['senha'];

                $result_dados_de_acesso = "INSERT INTO usuar (usuario, senha) VALUES ('$usuario', '$senha')";
                $resultado_dados_de_acesso = mysqli_query($conn, $result_dados_de_acesso);
            }

        $sql2 = "SELECT * FROM usuar";
            if(isset($_POST['enviar'])){
                $result2 = $conn->query($sql2);
                $row = $result2->fetch_assoc();

                $nome = $_POST['nome'];
                $cpf = $_POST['cpf'];

                $result_dados_pessoais = "INSERT INTO usuarios (nome, cpf) VALUES ('$nome', '$cpf')";
                $resultado_dados_pessoais = mysqli_query($conn, $result_dados_pessoais);

            }

? >

    
asked by anonymous 20.09.2017 / 19:42

1 answer

1

Can you reuse this code? 

$('button').on('click', function(btn){
console.log(btn.target.getAttribute('data-value'))
  $.ajax({
    url: 'url',
    data: {aba: btn.target.getAttribute('data-value')}
    type: 'GET',
    error: function(err){console.error(err)},
    success: function(data){
      console.log(data);
    }
  });
});
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><buttonid="bt1" data-value="1">1</button>
<button id="bt2" data-value="2">2</button>
 <button id="bt3" data-value="3">3</button>
    
20.09.2017 / 19:53
Request with Post Method and CURL Centralize Vertically