Ir ao conteúdo
Regras do Clube do Hardware

Refresh após envio de formulário

rsm_rlb

Por rsm_rlb
em Web e banco de dados

 Compartilhar

Posts recomendados

rsm_rlb
 

rsm_rlb

Postado
Postado

Minha dúvida é a seguinte: Como faço para o formulário dar um "refresh" e limpar automaticamente após o envio? É feito o envio do email, to recebendo certinho, tá me informando direito... Só que quando clico em "ok" no pop up, tudo que tava no formulário continua lá. Gostaria de saber como faço pra ele tirar essas informações da tela quando fizer o envio.

 

5hvNO41.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
	<link type="text/css" rel="stylesheet" href="css/contato.css" />
</head>

<body>

<!--Para centralizar é só colocar a tag <div align="center"> -->
<form method="post" action="envia_email.php">
       <input type="text" name="nome" placeholder="Nome" maxlength="50"/>
       <input type="text" name="telefone"  placeholder="Telefone" maxlenght="15"/>
       <input type="text" name="email" placeholder="E-mail" maxlength="50" />
       <textarea class="textarea" name="mensagem" placeholder="Mensagem"></textarea>

   <div class="btn">
       <input type="reset" value="Reset">
       <input type="submit" value="Enviar">
   </div>
 
</form> 
</body>
</html>

  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
<body>

<?php

$nome     = $_POST["nome"];
$telefone = $_POST["telefone"];
$email    = $_POST["email"];
$msg      = $_POST["mensagem"];

require 'phpmailer/PHPMailerAutoload.php';

$mail = new PHPMailer;

$mail->isSMTP();                                      
$mail->Host = 'smtp.gmail.com';  
$mail->SMTPAuth = true;                               
$mail->Username = 'xxx@xxx.com';                 
$mail->Password = 'xxx';                          
$mail->SMTPSecure = 'tls';                            
$mail->Port = 587;                                  

$mail->setFrom('xxx@xxx.com', 'Rxxx Mxxx');         
$mail->addAddress('xxx@xxx.com');     

$mail->isHTML(true);                                  

$subject = "Pedido de Orçamento";
$sub = "Orçamento";

$corpo = "
          <h1>".utf8_decode($sub) ."</h1> <br/> 
		  Cliente: " .utf8_decode($nome) ."<br/> 
		  Telefone: $telefone <br/> 
		  Email: $email <br/> 
		  Mensagem: " .utf8_decode($msg) 
          
         ;


$mail->Subject = utf8_decode($subject); 
$mail->Body    = $corpo;

if(!$mail->send()) {
    echo "<script type=\"text/javascript\"> alert (\"Ocorreu um erro. Tente novamente!	\");history.go(-1); </script>\n";
} else {
    echo "<script type=\"text/javascript\"> alert (\"Sua mensagem foi enviada com sucesso.\");history.go(-1); </script>\n";
}
?>
</body>
</html>

 

  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@rsm_rlb Você pode eliminar o refresh e zerar o formulário usando ajax em jQuery.

 

Em tempo,  na parte do seu php que envia o e-mail, não use as tags do HTML, como você está fazendo.

Deixe o arquivo envia_email.php  somente com a linguagem php. 

 

Sobre o ajax.  

 

Você está familiarizado com o jQuery? Se não,  vou fazer uma recapitulação simples.

 

Primeiro você  chama o arquivo jQuery no seu index desta forma: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Este é o CDN do google.  Você pode ter  o arquivo jquery no seu servidor se quiser, mas geralmente uso o CDN do google por sempre me garantir que ele fique online.

 

Com isso você está apto a usar o jQuery.

 

O código é bastante simples. A estrutura básica é: 

$(document).ready(function(){


});

Dentro deste bloco você vai usar as funções necessárias.

Vamos lá.

Primeiro você precisa acionar um evento ao clicar no botão de submit. 

$(document).ready(function(){
  //crie um class no submit com  "btn-enviar"
  var btn_enviar = $(".btn-enviar");
  
  btn_enviar.on("click", function(e){
      e.preventDefault();
  
  });
  

});

Veja que foi criada uma variável para armazenar o botão de submit.

Depois é atribuído a função on()  com o evento de click de mouse, ou seja,  quando o usuário clicar no botão de enviar, vai disparar o evento de click.   

Repare que a function ali tem um parâmetro  "e".  Este " e" é de event.  Você pode escrever qualquer coisa, mas eu segui o padrão.  a função preventDefault()  é o mesmo "return false"  usado no javascript. serve para que a função não seja disparada a cada clique.

 

OK, os preparativos já foram feitos. Agora vamos a parte que interessa o AJAX!

 

Abaixo de e.preventDefault()  você chama a função ajax: 

$(document).ready(function(){
  //crie um class no submit com  "btn-enviar"
  var btn_enviar = $(".btn-enviar");
  
  btn_enviar.on("click", function(e){
      e.preventDefault();
    
      var dados = $("form").serialize();
  
      $.ajax({
          url: "envia_email.php",
          method: "POST",
          dataType: "HTML",
          data: dados 
      }).done(function(retorno){
           $("msg_retorno").html(retorno);
           $("#form_id").trigger("reset");
      }).fail(function(retorno){
           $("msg_retorno").html(retorno);
      });  
  });
});

A função $.ajax() serve para fazer a requisição assíncrona dos dados.

Como  ela tem parâmetros é necessário usar chaves  {  } dentro dele.

O parâmetro url, indica qual arquivo será requisitado, definindo no jquery, você pode eliminar o action do formulário.

 

o method, define o método de envio. setando no jquery o POST, você elimina do formulário a chamada de method="POST".

 

o dataType, define que tipo de dado está sendo enviado. Tem vários, no seu caso use o HTML.

o data,  não é de data(tempo) mas sim de data de dados.  Se você perceber, foi criada uma variável chamada "dados". Esta variável, recebe o formulário e serializa os dados.

 

A função serialize() é útil quando você tem bastante campos no formulário e não quer perder tempo digitando cada um deles no javascript. Então usamos  serialize() para serializar e passar os dados em forma de string por exemplo: nome&telefone&email e etc...

 

Não se preocupe o php pega os dados normais. Não há mistério.

 

Como o jQuery é uma linguagem que permite encadeamento, repare que no final de $.ajax() não foi fechado com um ponto e virgula " ; " mas sim chamou uma nova função chamada done()   esta função é responsável por executar algo quando o formulário é bem sucedido. Ali dentro, você pode indicar onde vai aparecer a mensagem de mensagem enviada e chamar um reset no seu formulário.

 

Já a função fail() é o contrário, é para quando o formulário não for enviado, apresentar a mensagem de  erro.

 

Usando desta forma,  no seu arquivo envia_email.php, você não pode usar o retorno de dados em javascript, ou seja, em outras palavras, deve manter somente o texto.

 

Com isso, você pode usar a sua criatividade, em criar um popup personalizado, modal ou até mesmo plugins jQuery chamado jAlerts  que são específico para alertas de mensagens. Um exemplo de uso, desses jalerts é quando você denuncia um tópico ou post aqui, aparece no meio da tela uma mensagem de agradecimento.

 

Então as explicações terminam aqui deixo a seguir como ficaria seu código:

 

HTML:

  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
	<link type="text/css" rel="stylesheet" href="css/contato.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
     $(document).ready(function(){
  //crie um class no submit com  "btn-enviar"
  var btn_enviar = $(".btn-enviar");
  
  btn_enviar.on("click", function(e){
      e.preventDefault();
    
      var dados = $("#contato").serialize();
  
      $.ajax({
          url: "envia_email.php",
          method: "POST",
          dataType: "HTML",
          data: dados 
      }).done(function(retorno){
           $("msg_retorno").html(retorno);
           $("#form_id").trigger("reset");
      }).fail(function(retorno){
           $("msg_retorno").html(retorno);
      });  
  });
});
  
  </script>
  
</head>

<body>

<!--Para centralizar é só colocar a tag <div align="center"> -->
<form id="contato">
       <input type="text" class="nome" name="nome" placeholder="Nome" maxlength="50"/>
       <input type="text" class="telefone" name="telefone"  placeholder="Telefone" maxlenght="15"/>
       <input type="text" class="email" name="email" placeholder="E-mail" maxlength="50" />
       <textarea class="textarea" name="mensagem" placeholder="Mensagem"></textarea>

   <div class="btn">
       <input type="reset" value="Reset">
       <input type="submit" class="btn-enviar" value="Enviar">
   </div>
 
</form> 
</body>
</html>

PHP: 

<?php

$nome     = $_POST["nome"];
$telefone = $_POST["telefone"];
$email    = $_POST["email"];
$msg      = $_POST["mensagem"];

require 'phpmailer/PHPMailerAutoload.php';

$mail = new PHPMailer;

$mail->isSMTP();                                      
$mail->Host = 'smtp.gmail.com';  
$mail->SMTPAuth = true;                               
$mail->Username = 'xxx@xxx.com';                 
$mail->Password = 'xxx';                          
$mail->SMTPSecure = 'tls';                            
$mail->Port = 587;                                  

$mail->setFrom('xxx@xxx.com', 'Rxxx Mxxx');         
$mail->addAddress('xxx@xxx.com');     

$mail->isHTML(true);                                  

$subject = "Pedido de Orçamento";
$sub = "Orçamento";

$corpo = "
          <h1>".utf8_decode($sub) ."</h1> <br/> 
		  Cliente: " .utf8_decode($nome) ."<br/> 
		  Telefone: $telefone <br/> 
		  Email: $email <br/> 
		  Mensagem: " .utf8_decode($msg) 
          
         ;


$mail->Subject = utf8_decode($subject); 
$mail->Body    = $corpo;

if(!$mail->send()) {
    echo "Ocorreu um erro. Tente novamente!";
} else {
    echo "Sua mensagem foi enviada com sucesso.";
}
?>

Só para você se situar, o conteúdo da variável "retorno" lá no jquery é :  Ocorreu um erro. Tente novamente!  no fail()  e  Sua mensagem foi enviada com sucesso. no done()

 

PS: caso, o formulário não seja resetado ao enviar, experimente substituir o trigger("reset")

pelos próprios campos em branco.  exemplo:


  

$(".nome").val("");
$(".telefone").val("");
$(".email").val("");
$(".textarea").val("");

Setando um valor vazio ao campo com val()  você reseta o campo também.

 

Espero ter ficado bem claro.  

rsm_rlb
 

rsm_rlb

Postado
  • Autor
Postado

Cara, tá dando algo errado.  Deixa eu ver se entendi direito. 

  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
     $(document).ready(function(){

  var btn_enviar = $(".btn-enviar");
  
  btn_enviar.on("click", function(e){
      e.preventDefault();
    
      var dados = $("#contato").serialize();
  
      $.ajax({
          url: "envia_email.php",
          method: "POST",
          dataType: "HTML",
          data: dados 
      }).done(function(retorno){
           $("msg_retorno").html(retorno);
           $("#form_id").trigger("reset");
      }).fail(function(retorno){
           $("msg_retorno").html(retorno);
      });  
  });
});
  
  </script>

esses dois scripts eu insiro diretamente no contato, dentro da Head e após o Css correto? Porque você falou algo sobre colocar o primeiro no index.  

class="btn-enviar"

Essa classe é inserida  no input do Enviar

  

if(!$mail->send()) {
    echo "Ocorreu um erro. Tente novamente!";
} else {
    echo "Sua mensagem foi enviada com sucesso.";
}

E nessa parte do envia_email.php eu devo tirar o script que havia colocado?

 

Será que faltou ou errei algo?

 

Estou recebendo o email, mas ele está vindo vazio. Além disso os dados continuam na tela. 

 

E aonde que devo inserir isso que não entendi?

  

$(".nome").val("");
$(".telefone").val("");
$(".email").val("");
$(".textarea").val("");

 

  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@rsm_rlb Vamos lá... 

O jeito que eu postei, foi só  um exemplo. Assumindo que o formulário esteja no index.html ou index.php.

 

O javascript e o script jquery deve sempre ser carregado na parte principal. HJ as boas práticas da programação recomenda que deixe no head somente arquivos de CSS  e carregar os javascripts no final da página.

Para aprendizado, no momento sugiro deixar tudo lá no head mesmo.

 

class="btn-enviar" é só uma classe que foi criada para fazer a chamada no jQuery. 

Poderia ter usado um id="btn-enviar" aí no jQuery chamaria como $("#btn-enviar")

 

1 hora atrás, rsm_rlb disse: 
if(!$mail->send()) {
    echo "Ocorreu um erro. Tente novamente!";
} else {
    echo "Sua mensagem foi enviada com sucesso.";
}

E nessa parte do envia_email.php eu devo tirar o script que havia colocado?

Não,  não mexa nisso. Esta é a verificação se a função $mail->send() não foi executada. Veja que ! é negação.

As frases contidas no ECHO  serão as que vão aparecer lá na função done()  e fail()  expliquei mais acima isso.

 

1 hora atrás, rsm_rlb disse:

E aonde que devo inserir isso que não entendi?

  

$(".nome").val("");
$(".telefone").val("");
$(".email").val("");
$(".textarea").val("");

Vamos pensar um pouquinho!!!

Onde queremos informar ao código jquery  que o formulário deve ser limpo ao enviar?

 

Dentro da função done()............

 

Vejamos o que eu disse anteriormente:

3 horas atrás, DiF disse:

Só para você se situar, o conteúdo da variável "retorno" lá no jquery é :  Ocorreu um erro. Tente novamente!  no fail()  e  Sua mensagem foi enviada com sucesso. no done()

 

PS: caso, o formulário não seja resetado ao enviar, experimente substituir o trigger("reset")

pelos próprios campos em branco.  exemplo:


  

$(".nome").val("");
$(".telefone").val("");
$(".email").val("");
$(".textarea").val("");

Setando um valor vazio ao campo com val()  você reseta o campo também.

 

Procurando no código, verá que o trigger("reset") é usado dentro da função done(). Então é ali que colocaremos as linhas onde  insere um valor vazio no campo.  

Mas atente-se.  Ali está como class,  então nos campos do seu formulário você precisa ter essas class. 

Caso você use IDs.  aí no código você altera de  $(".nome") para $("#nome") e assim por diante.

rsm_rlb
 

rsm_rlb

Postado
  • Autor
Postado

Tentei das vários jeitos e nenhum tá funcionando. 

  

.done(function(retorno){
           $("msg_retorno").html(retorno);
           $(".nome").val("");
		$(".telefone").val("");
		$(".email").val("");
		$(".textarea").val("");
.done(function(retorno){
           $("msg_retorno").html(retorno);
           $("#form_id").trigger($(".nome").val("");
		$(".telefone").val("");
		$(".email").val("");
		$(".textarea").val(""););
.done(function(retorno){
           $("msg_retorno").html(retorno);
           $("#form_id").$(".nome").val("");
$(".telefone").val("");
$(".email").val("");
$(".textarea").val("");

Outra coisa que percebi. 

 

1 hora atrás, DiF disse:

Não,  não mexa nisso. Esta é a verificação se a função $mail->send() não foi executada. Veja que ! é negação.

As frases contidas no ECHO  serão as que vão aparecer lá na função done()  e fail()  expliquei mais acima isso

 

Entendo que isso seja importante pro script. Mas depois que inseri essa parte, o código não me dá mais a confirmação de que o código está sendo enviado com sucesso.

  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@rsm_rlb  Se você usar o console.log(retorno)  dentro de .done() provavelmente ele vai mostrar a mensagem.

Lembre-se que quando sugeri isso, é necessário que você crie um elemento DIV ou outro qualquer para ter a mensagem!

 

Exemplo: 

<div class="msg-retorno"></div>

OU se você realmente quiser fazer com um popup simplezinho em javascript basta por um alert(retorno) dentro de .done()

rsm_rlb
 

rsm_rlb

Postado
  • Autor
Postado

@DiF Eu não consegui fazer funcionar com isso. Consegui limpar o formulário após o envio com outro código...

  

<script type="text/javascript" language="javascript">
function ClearForm(){
    document.Form_login.reset();
}
</script>

Eu queria muito conseguir entender isso que tu tá dizendo, mas vou ter que pegar JQuery pra estudar primeiro, porque minha cabeça deu muito nó mesmo com suas explicações. Ainda assim agradeço a paciencia e a ajuda. 

  • Curtir 1
Visitante
Este tópico está impedido de receber novas respostas.
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

GRÁTIS: ebook Redes Wi-Fi – 2ª Edição

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!