Jump to content
andrelimaverde

Enviar FORM sem REFRESH & input "escondido"

Recommended Posts

Pessoal preciso de uma ajuda, desde já agradeço à todos.

"Site teste, estudos..."

Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).

Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]

Exemplo:  Pagina 1 - envia para action '1.php'

Nome: 

Telefone:

<input type="submit" value="Continuar">

(

 O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   

 Assim como os outros php's

)

Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 

Cidade:

Endereço:

<input type="submit" value="Continuar">

 

A questão está na 3ª página

Página 3 -

Email:

(Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 

No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...

Share this post


Link to post
Share on other sites
var botao = document.querySelector('.proximo-passo');
botao.addEventListener(function (event) {
  event.preventDefault();
  document.querySelector('.partial-email').classList.add('hide');
  document.querySelector('.partial-twitter').classList.remove('hide');
});
                      
<form action="finaliza.php" id="formulario">
  <div class="partial-email">
    Informe seu e-mail: <input type="email" name="email" />

    <button type="button" class="proximo-passo">Próximo passo</button>
  </div>

  <div class="partial-twitter">
    Informe seu twitter: <input type="text" name="twitter" />
    <button type="submit">Salvar</button>
  </div>
</form>

Pensei em começar com uma estrutura simples, que conforme com todos os requisitos que você disse. Daí pensei em fazer uma mágina com o CSS, criar uma classe hide que irá sumir com parte da estrutura... temos um botão fake (type=submit) que o usuário irá clicar achando que está indo para a próxima página e um botão de submit que irá enviar o formulário como um todo.

<style>
  .hide {
    display: none;
  }
</style>

<form action="finaliza.php" id="formulario">
  <div class="partial-email">
    Informe seu e-mail: <input type="email" name="email" />

    <button type="button" class="proximo-passo">Próximo passo</button>
  </div>

  <div class="partial-twitter hide"><!-- perceba que adicionei o .hide aqui para que este bloco possa sumir -->
    Informe seu twitter: <input type="text" name="twitter" />
    <button type="submit">Salvar</button>
  </div>
</form>

Agora, via JavaScript vamos adicionar uma ação naquele botão de Próximo passo para colocar o .hide no bloco de e-mail e removê-lo do bloco de twitter.

 

var botao = document.querySelector('.proximo-passo');

botao.addEventListener(function (event) {
  event.preventDefault();
  document.querySelector('.
});

Simple like that!

 

Tomei a liberdade de utilizar métodos mais simples de entender e mais modernos do que tentar usar coisas como jQuery ou mesmo caçar todos os elementos e fazer um for para procurar por classe ou manipular a classe como string e adicionar a classe ou fazer expressão regular... deixo nas referencias os links das compatibilidades dessas tecnologias para o caso de você querer saber se te atende...

 

Sobre sua dúvida sobre input ou button. O primeiro funciona muito bem para fazer ações distintas no mesmo formulário, já que você precisa adicionar um value, aproveira e adicionar um name e pronto, você receberá qual botão o usuário "clicou". Vejo essa funcionalidade ser pouco explorada, na verdade... mas é uma possíbilidade. Já no outro, temos outras vantagens como por exemplo, poder colocar código HTML como texto do botão.... experimente utilizar uma ag img ;-) .... e fica muito mais fácil de estilizar todos os outros campos já que você diferencia um input de um button mais fácil que pela classe.... não sei se elucidou, mas enfim.

 

Abraços, qualquer coisa, grita!

 

---

Referencias:

https://caniuse.com/#feat=classlist

https://caniuse.com/#feat=queryselector

https://caniuse.com/#feat=addeventlistener

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By ricardonews
      olá pessoal, alguém ja teve dificuldade de logar no banco com um formulario de login feito pelo ajax quando a senha é criptografada?
      a minha está o sendo pelo md5 e quando deixo sem criptografia eu logo no banco.  Eu gostaria de logar com criptografia.
      vou deixar  a index e o arquivo que busca no banco de dados
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>Formulario de login</title> <style type="text/css"> html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } #div_login{ width:500px; margin:40px auto; position:relative; background-color: #ffffff; padding: 20px; border-radius: 5px; } #message{ width:100%; text-align:center; color:red; margin-bottom: 20px; } #div_login h1 { text-align: center; } #div_login input, #div_login textarea,#div_login a{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #div_login #but_submit,#div_login a { background-color: #27ae60; font-weight: bold; text-transform: uppercase; color: #ffffff; width: auto; margin: 0; padding: 10px 20px; } </style> <!--<link href="style.css" rel="stylesheet" type="text/css">--> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "email e senhas invalidos!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="email" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="senhas"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> <a href="inicio.php"><strong>Cadastrar</strong></a> </div> </div> </div> </body> </html> agora vem oque busca os dados no banco e é justamente essa parte que eu não entendo oque acontece.
      <?php require_once "config.php"; // AQUI É O PESQUISAR PHP $uname = mysqli_real_escape_string($con,$_POST['username']); $password = mysqli_real_escape_string($con,$_POST['password']); if ($uname != "" && $password != ""){ $sql_query = "SELECT count(*) as cntUser FROM usuarios WHERE email='".$uname."' and password='".$password."'"; $result = mysqli_query($con,$sql_query); $row = mysqli_fetch_array($result); $count = $row['cntUser']; if($count > 0){ $_SESSION['uname'] = $uname; echo 1; }else{ echo 0; } } desde já fico agradeço 
    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.