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 thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By emmanuelsiqueira30
      Estou tentando inserir os valores de uma matrícula e gerar já as parcelas das mensalidades.
      Agradeço toda ajuda possível.
       
      cadMatriculaModel.php
      <?php include("../Controller/conexao.php"); include("../Controller/util.php"); header('Content-Type: text/html; charset=utf-8'); $id_aluno = $_POST['id_aluno']; $id_curso = $_POST['id_curso']; $data_matricula = date("Y-m-d"); $codunico_matricula = bin2hex(random_bytes(8)); $tipo_pag_matricula = $_POST['tipo_pag_matricula']; $dia_venc_matricula = $_POST['dia_venc_matricula']; $n_parc_matricula = $_POST['n_parc_matricula']; $sql_valor_curso = "SELECT * FROM curso WHERE id_curso = $id_curso"; $result_valor_curso = mysqli_query($con,$sql_valor_curso); $row_valor_curso = mysqli_fetch_assoc($result_valor_curso); $valor_curso = $row_valor_curso['valor_curso']; $dt_curso_ini = $row_valor_curso['data_inicio_curso']; $dt_curso_fim = $row_valor_curso['data_fim_curso']; $dif = strtotime($dt_curso_fim) - strtotime($dt_curso_ini); $periodo_curso_meses = floor($dif / (60 * 60 * 24 * 30)); $valor_parc = intval($valor_curso) / $periodo_curso_meses; $sqlmatricula = "INSERT INTO matricula (id_aluno,id_curso,data_matricula,codunico_matricula,tipo_pag_matricula,dia_venc_matricula,n_parc_matricula) VALUES ('$id_aluno','$id_curso','$data_matricula','$codunico_matricula','$tipo_pag_matricula','$dia_venc_matricula','$n_parc_matricula')"; $resultmatricula = mysqli_query($con,$sqlmatricula); $ultimamatricula = mysqli_insert_id($con); if($resultmatricula == true){ //echo "<script>alert('Matrícula realizada com sucesso.');</script>"; $x = 1; while($x >= $n_parc_matricula){ //for ($x = 0; $x == $n_parc_matricula; $x++) { /* $dia = date("d"); $mes = date("m"); $ano = date("Y"); $dt_venc_pr = date("Y/m/d",strtotime("+".$x." month",mktime(0, 0, 0,$dia,$mes,$ano))); echo $dt_venc_pr; */ $sqlpr = "INSERT INTO parcelareceber (id_matricula,id_aluno,id_curso,valor_parc_pr,dt_pag_pr) VALUES ('$ultimamatricula','$id_aluno','$id_curso','$valor_parc','$data_matricula')"; $resultpr = mysqli_query($con,$sqlpr); echo $sqlpr; if($resultpr == true){ echo "<script>alert('Parcelas geradas com sucesso.');</script>"; }else { echo "<script>alert('Erro na inserção das parcelas.');</script>"; echo $resultpr; } } echo $x; echo $n_parc_matricula; }else{ } cadMatriculaView.php
      <!DOCTYPE html> <html> <title>Matrícula do aluno</title> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> </head> <body> <?php include 'menuView.php'; ?></br></br> <?php ini_set( 'default_charset', 'UTF-8' ); ini_set( 'mbstring.http_output', 'UTF-8' ); ini_set( 'mbstring.internal_encoding', 'UTF-8' ); header("Content-Type: text/html; charset=UTF-8",true); ?> <font face="verdana" size="4"> <form action="../Model/cadMatriculaModel.php" method="POST"> <fieldset> <legend>CONSULTA DE ALUNO</legend> <label for="proprietario_id_prop">Digite o CPF do aluno: </label> <input type="text" class="form-control" name="textbox" id="textbox" placeholder="Digite CPF do aluno"></br> ALUNO: <select class="form-control" name="id_aluno" id="select" style="width: 400px"> <?php include ("../Controller/conexao.php"); $query = "SELECT * FROM aluno"; $consulta = mysqli_query($con,$query); while ($dados = mysqli_fetch_assoc($consulta)) { ?> <option value="<?php echo $dados['idaluno']; ?>"><?php echo $dados['cpfaluno'] . " - " . $dados['nomealuno']; ?></option> <?php } ?> </select></br> </fieldset> <fieldset> <legend>ESCOLHA DO CURSO</legend> CURSO: <select class="form-control" name="id_curso" id="select"> <?php include ("../Controller/conexao.php"); $query = "SELECT * FROM curso"; $consulta = mysqli_query($con,$query); while ($dados = mysqli_fetch_assoc($consulta)) { ?> <option value="<?php echo $dados['id_curso']; ?>"><?php echo $dados['nome_curso'] . " - " . $dados['turno_curso']; ?></option> <?php } ?> </select></br> </fieldset> TIPO DE PAGAMENTO: <select name="tipo_pag_matricula"> <option value="1">A PRAZO</option> </select></br> DIA DO VENCIMENTO: <input type="text" name="dia_venc_matricula" maxlength="2"> NÚMERO DE PARCELAS: <input type="text" name="n_parc_matricula" maxlength="2"><br> <span style="color: red; font-size: 8pt">* Campos obrigatórios.</span></br> <button type="submit" name="btninserir">INSERIR MATRÍCULA</button> </form> </font> <script> jQuery.fn.filterByText = function(textbox, selectSingleMatch) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({value: $(this).val(), text: $(this).text()}); }); $(select).data('options', options); $(textbox).bind('change keyup', function() { var options = $(select).empty().data('options'); var search = $(this).val().trim(); var regex = new RegExp(search,"gi"); $.each(options, function(i) { var option = options[i]; if(option.text.match(regex) !== null) { $(select).append( $('<option>').text(option.text).val(option.value) ); } }); if (selectSingleMatch === true && $(select).children().length === 1) { $(select).children().get(0).selected = true; } }); }); }; $(function() { $('#select').filterByText($('#textbox'), false); $("select option").click(function(){ alert(1); }); }); </script> </body> </html> E também est[a dando esse erro Notice: Undefined index: dia_venc_matricula in C:\xampp\htdocs\curso\Model\cadMatriculaModel.php on line 15 mas já verifiquei a variávewl e está correta.
    • By luigiferrari
      Boa Tarde, sou iniciante no php, mas acho q isso seria coisa simples de se fazer. Porem não estou conseguindo...
      Se puderem me ajudar. 
      Agradeço desde já!


    • By winter2018
      Boa tarde galera 
       
      Preciso por favor de uma ajuda.
      Estou a criar um sistema de cadastro de currículos em php.
       
      Preciso que ao escolher  as línguas que o usuário falar, essas informações sejam armazenadas num array para depois serem inseridas  no  mysql junto com outros campos, como  nome,  idade, etc.
       
       
      Sei programar em php mas não  tenho ideia de como fazer isso.
       
      Por favor me ajudem 
       
       
      Winter 2018
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
×

Important Information

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