Form with automatic save

Asked

Viewed 57 times

1

I am creating a tab form, in which has 3 tabs and each one belongs to a table, I wonder if there is a way to save what was filled in a logo tab where I change 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);

            }

?>

php sql-insert
  • 1

    What is your level of knowledge in js? It’s possible with ajax! You can trigger a function by clicking on a tab with the event onclick https://www.w3schools.com/jsref/event_onclick.asp

  • then I don’t have high level guy, it would be difficult and complex to have advanced knowledge ?

  • Not necessarily. I’ll give you an example below

  • 2

    Okay thanks for the good will man

1 answer

1

Can you reuse that 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>
<button id="bt1" data-value="1">1</button>
<button id="bt2" data-value="2">2</button>
 <button id="bt3" data-value="3">3</button>

  • I believe yes, I just put my button id on my isset that was used for Insert, correct ?

  • You can pass the tab in the data-value for example. In ajax, put the date:{tab: 1} for example. I edited above for example.

  • There on the server, it will be a $_GET['tab'].

  • didn’t work very well, I didn’t understand the code but thank you

  • kkk cmo like this? ..

  • I will post here the code to try to demonstrate, I removed a tab and an Index to get smaller, I wanted that when transiting from the Personal Data tab to Registration Data, the information of the first tab were saved

  • Let’s go continue this discussion in chat.

Show 2 more comments

Browser other questions tagged php sql-insert

You are not signed in. Login or sign up in order to post.