Zerar formulário após submit e confirmação do Recaptcha GOOGLE com Aja

Jeovane Carvalho · Maio 3, 2015

Salve amigos primeira vez postado na área de Java e me deparei com o seguinte problema em meu script:

Tenho um formulário que envia dados em php e requisição via Ajax, só que têm um detalhe, o meu Formulário funciona normalmente e têm o Recaptcha do Google, mas na hora que envia dos dados para meu email, o Formulário não reseta, os dados ainda fica gravados nos campos, dando a impressão para o usuário como se não fosse enviado mesmo tendo a mensagem de confirmação de enviado com sucesso, eu tenho outro script em Jquery que ele até zera os dados certinho , mas ele não confirma o captcha , e pelo que entendi, o captcha do google trabalha pelo servidor e ele precisa enviar o ip da máquina do usuário [ADDR] para confirmar os caracteres digitados.

Segue o script que funciona certinho, mas não reseta o formulário :

Este script eu peguei do Blog do Bruno William

<script type="text/javascript" src="js/jquery.js"/></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#contactform_2').submit(function(){
beforeSend:$("#carregando").fadeIn("slow");
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "enviarcontato.php",
data: dados,
success: function(data){
alert( data );
{complete:$("#carregando").fadeOut("slow");
}}}
), 

function(resposta) {
// Quando terminada a requisição
// Exibe a div status
$("#carregando").slideDown();
if (resposta != false)  {

    $("#contactform_2").each(function(){ this.reset(); }); 
 

}else{
 // Se resposta for false, ou seja, não ocorreu nenhum erro
 
$("#name1").val("");	// Limpando todos os campos
$("#email").val("");
$("#telefone").val("");
$("#mensagem").val("");
$("#recaptcha_response_field").val("");

}
}
});






return false;

});


  

</script>


<form method="post" name="contactform" id="contactform_2" action="javascript:func()" enctype="multipart/form-data"  onsubmit="return Checkit(this);">
<table class="table">
<tr>
<td><div class="table_header"><?php echo $websitename;?></div></td>
</tr>
<tr><td></td>
</tr>
<tr>
<td><div class="attach_info">
<b>DÚVIDAS SUGESTÕES E PEDIDOS PREENCHA O FORMULÁRIO :</b>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><div class="table_body"><label><b>Seu Nome:</b></label>
<input name="nome" id="name1" class="nome" placeholder="Digite seu nome" type="text" />
<span class="error_message">*</span></div></td>
</tr>
<tr>
<td><div class="table_body"><label><b>Seu Email:</b></label>
<input name="email" id="email" class="email" placeholder="Digite seu email" type="text" /><span class="error_message">*</span></div>
</td>
</tr>
<tr>
<td><div class="table_body">
<label><b>Seu Telefone:</b></label>
<input name="telefone" id="telefone" class="telefone" maxlength="17" placeholder="Digite seu telefone ou Cel" type="text"/><span class="error_message">*</span><br /><br /><br /></div><br />
<div class="table_body_operadora">
<label><b>Selecione a Operadora:</b></label>
<select name="operadora" id="operadora" class="operadora">
<option value="Não Selecionado" class="operadora"></option>
<option value="Claro" class="operadora">Claro</option>
<option value="Tim" class="operadora">Tim</option>
<option value="Vivo" class="operadora">vivo</option>
<option value="OI" class="operadora">Oi</option>
<option value="Nextel" class="operadora">NEXTEL</option>
<option value="Livre" class="operadora">Livre</option>
<option value="Outros" class="operadora">Outros</option>
</select><span class="error_message">*</span></div>

</td>
</tr>
<tr>
<td><div class="table_body_3">
<label><b>Sua Mensagem:</b></label>
<textarea name="mensagem" id="mensagem" class="mensagem" placeholder="Digite sua Mensagem" rows="8" cols="60"></textarea><span class="error_message">*</span>
<br /><br />
<div class="caracteres_2"><b>Digite aqui os caracteres abaixo: </b></div>
<div class="captcha_2">
<?php
require_once('recaptchalib.php');
$publickey = "chave key do google"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
</div>
<br /><br /></div>
<br />
<div id="carregando" style="display:none;">
<span style="color:#000000;  font-family:Georgia, 'Times New Roman', Times, serif;font-size:13px;">Enviando Mensagem : Aguarde...  <img src="imgs/ajax-loader.gif" /><br /><br /></span> 
<span style="color:#03F; font-weight:bold; font-family:Tahoma, Geneva, sans-serif; font-size:15px;">Não Feche a Página !</span></div><!--carregando-->
<div id="retorno"></div>
</td>
</tr>
<tr>
<td class="table_footer">
<table>
<tr>
<td> </td>
<td></td>
<td>

<input type="submit" class="btnenviar" name="enviar" id="enviar" value="Enviar Formulário" />
</td>
<td>
<input type="reset"  class="btnresetar" value="Limpar Formulário" id="resetar"  />
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br /><br />
</form>
</div>

NOTEM: que dentro do ajax eu faço um if usando aquelas funções para reset mas mesmo assim não zera, fiz um gambiarra colocando os dentro do true e no else sei que estou perto de resolver, mas ainda não consegui, se alguém puder dar um help, fico agradecido:

Criquio · Maio 4, 2015

Já tentou por js clássico sem sem por jq para ver se funciona?

document.getElementById("nome_do_id").value = "";

William Bruno · Maio 4, 2015

Bom, vc tem que ter certeza do que está voltando do backend:

function(resposta) {
   console.log(resposta, typeof resposta);

veja no console Ctrl + Shift + J (Firefox ou Chrome) o que aparece.

Jeovane Carvalho · Maio 4, 2015

Ola Criqui e Bruno , obrigado por responder, Criqui eu já tentei desta maneira e não deu certo, então Bruno quando você diz backend, você quer dizer o que volta do servidor dentro do php, tipo se a mensagem foi enviada junto com os dados, sim as mensagem chegam perfeitamente no email , e não mando para o BD, e fiz o que você disse Bruno e veja o que gerou em JS:

Error: Permission denied to access property "toString" <desconhecido>
Uma estrutura em árvore não balanceada foi escrita através de document.write(), fazendo com que dados da rede fossem reprocessados. Mais informações em https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing contato:898:0
ReferenceError: Checkit is not defined contato:1:0
ReferenceError: func is not defined javascript:func():1:0
Uma estrutura em árvore não balanceada foi escrita através de document.write(), fazendo com que dados da rede fossem reprocessados. Mais informações em https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing if:1:0
Uma estrutura em árvore não balanceada foi escrita através de document.write(), fazendo com que dados da rede fossem reprocessados. Mais informações em https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing if:1:0
Error: Permission denied to access property "toString" <desconhecido>
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.10.2.min.js:1:0
O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. jquery-1.7.2.min.js:3:0
O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. jquery-1.7.2.min.js:3:0
O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. jquery-1.7.2.min.js:3:0
Handler function NM_observeActivity threw an exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsITraceableChannel.setNewListener]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/toolkit/webconsole/network-monitor.js :: NM__setupResponseListener :: line 867"  data: no]
Stack: NM__setupResponseListener@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/toolkit/webconsole/network-monitor.js:867:27
NM__onRequestHeader@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/toolkit/webconsole/network-monitor.js:795:4
NM_observeActivity@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/toolkit/webconsole/network-monitor.js:610:6
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/DevToolsUtils.js:82:13
Line: 867, column: 0 DevToolsUtils.js:58:0
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.10.2.min.js:1:0
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.10.2.min.js:1:0
A codificação de caracteres de um documento em um frame não foi declarada. O documento pode ser exibido de forma diferente se aberto fora de um frame. ai.php
A codificação de caracteres de um documento em um frame não foi declarada. O documento pode ser exibido de forma diferente se aberto fora de um frame.

William Bruno · Maio 5, 2015

Corrige tudo isso, tem muito erro ai.

Jeovane Carvalho · Maio 5, 2015

Ok Bruno eu tinha tirado Ctrl + Shift + J depois de enviar a msg como teste , mas agora tirei Ctrl + Shift + J na hora que atualizei a página seria essa forma correta.. veja os erros agora:

Error: Permission denied to access property "toString" <desconhecido>
Uma estrutura em árvore não balanceada foi escrita através de document.write(), fazendo com que dados da rede fossem reprocessados. Mais informações em https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing contato:899:0
Error: Permission denied to access property "toString" <desconhecido>
Uma estrutura em árvore não balanceada foi escrita através de document.write(), fazendo com que dados da rede fossem reprocessados. Mais informações em https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing

Na verdade como tinha dito as mensagens chegam corretamente no meu email sem erro só não reseta o form, pelo que entendi o js não recebe retorno de envio para ele usar as funções de reset abaixo.

E depois que envia a msg apareceu estes erros :

ReferenceError: Checkit is not defined contatoTESTE_AJAX.php:1:0
ReferenceError: func is not defined javascript:func():1:0
ReferenceError: Checkit is not defined contatoTESTE_AJAX.php:1:0
ReferenceError: func is not defined javascript:func():1:0
ReferenceError: Checkit is not defined contato:1:0
ReferenceError: func is not defined javascript:func():1:0
ReferenceError: Checkit is not defined contato:1:0
ReferenceError: func is not defined javascript:func():1:0
ReferenceError: Checkit is not defined contato:1:0
ReferenceError: func is not defined javascript:func():1:0
ReferenceError: Checkit is not defined contato:1:0
ReferenceError: func is not defined javascript:func():1:0
ReferenceError: Checkit is not defined contato:1:0
ReferenceError: func is not defined javascript:func():1:0
O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. jquery-1.7.2.min.js:3:0
O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. jquery-1.7.2.min.js:3:0
estado não esperado do processador aboutNetError.xhtml:392:50
NS_ERROR_ILLEGAL_VALUE: Component return

Jeovane Carvalho · Maio 6, 2015

Bruno nesse seu script que peguei lá do seu blog, me de uma dica de como implementaria o reset(), para limpar o form após envio:

    <html>
    <head>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    	<script type="text/javascript">
    	jQuery(document).ready(function(){
    		jQuery('#ajax_form').submit(function(){
    			var dados = jQuery( this ).serialize();
     
    			jQuery.ajax({
    				type: "POST",
    				url: "processa.php",
    				data: dados,
    				success: function( data )
    				{
    					alert( data );
    				}
    			});
    			
    			return false;
    		});
    	});
    	</script>
    </head>
    <body>
    	<form method="post" action="" id="ajax_form">
    		<label><input type="hidden" name="id" value="" /></label>
    		<label>Nome: <input type="text" name="nome" value="" /></label>
    		<label>Email: <input type="text" name="email" value="" /></label>
    		<label>Telefone: <input type="text" name="telefone" value="" /></label>
     
    		<label><input type="submit" name="enviar" value="Enviar" /></label>
    	</form>
    </body>
    </html>

aí eu iria testar implementando o Recaptcha do Google.

William Bruno · Maio 6, 2015

success: function( data ){

$('#ajax_form').reset();

alert( data );

}

Jeovane Carvalho · Maio 6, 2015

Ola Bruno adaptei este trecho do código porém agora ele não valida mais os campos e nem reseta o form após ser enviado a mensagem.

William Bruno · Maio 6, 2015

E o que está aparecendo no console de erros ? Se "quebrou" todo o comportamento, provavelmente agora tem algum erro lá.

Veja sempre no Ctrl + Shift + J.

Jeovane Carvalho · Maio 6, 2015

Aparece isso...

O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. jquery.min.js:3:0
TypeError: $(...).reset is not a function

William Bruno · Maio 6, 2015

como ficou o teu código ?

TypeError: $(...).reset is not a function

Jeovane Carvalho · Maio 6, 2015

vou te passar o código com ajax e o enviar:

contato.php

 <html>
    <head>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    	<script type="text/javascript">
    	jQuery(document).ready(function(){
    		jQuery('#ajax_form').submit(function(){
    			var dados = jQuery( this ).serialize();
     
    			jQuery.ajax({
    				type: "POST",
    				url: "enviarcontato.php",
    				data: dados,
    				success: function( data )
    				{
$('#ajax_form').reset();
    					alert( data );
    				}
    			});
    			
    			return false;
    		});
    	});
    	</script>
    </head>
    <body>
    	<form method="post" action="" id="ajax_form">
    		<label><input type="hidden" name="id" value="" /></label>
    		<label>Nome: <input type="text" name="nome" value="" /></label>
    		<label>Email: <input type="text" name="email" value="" /></label>
    		<label>Mensagem: <input type="text" name="mensagem" value="" /></label>
     
    		<label><input type="submit" name="enviar" value="Enviar" /></label>
    	</form>
    </body>
    </html>

enviarcontato.php


<?php
session_start();
include("config.php");
ini_set( 'default_charset', 'utf-8');

?>
<?php
$nome          =$MySQLi->real_escape_string (strip_tags(trim($_POST['nome'])));
$email         =$MySQLi->real_escape_string (strip_tags(trim($_POST['email'])));
$mensagem      =$MySQLi->real_escape_string (strip_tags(trim($_POST['mensagem'])));
$recaptcha_challenge_field=$MySQLi->real_escape_string (strip_tags(trim($_POST['recaptcha_challenge_field'])));
$recaptcha_response_field=$MySQLi->real_escape_string (strip_tags(trim($_POST['recaptcha_response_field'])));


if(empty($nome)){
echo "Preencha o Campo Nome!";
}elseif(empty($email)){
echo "Preencha o Campo Email!";
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo "Email Inválido Tente Novamente!";

}elseif(empty($mensagem)){
echo "Preencha o Campo Mensagem!";


}else{



$data = date('d/m/Y ');
$hora= date('H:i:s');
require('phpmailer/class.phpmailer.php');
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->Port = 587;
$mail->Host = 'smtp do host';
$mail->Username = 'email';
$mail->Password = 'senha';
$mail->SetFrom('email', "".$nome."");
$mail->SetFrom('email', "".$nome."");
$mail->AddAddress('email', "".$nome."");
$mail->AddAddress('email', "".$nome."");
$mail->Subject = 'Formulário de Contato de Clientes';
$body = "
Mensagem do usuario
";

$mail->MsgHTML($body);
$pasta = 'uploads/';
$arquivos = glob("$pasta{*.jpg,*.png,*.gif,*.bmp}", GLOB_BRACE);
foreach($arquivos as $img){?>
 
<?php echo $mail->AddAttachment  ?>
 <?php $mail->AddAttachment ($img);
 }
if($mail->Send());

?>
<?php

// Script para deletar arquivos
// unlink -> funo do php para deletar arquivo

$pasta = 'uploads/';
$arquivos = glob("$pasta{*.jpg,*.png,*.gif,*.bmp}", GLOB_BRACE);
foreach($arquivos as $img){?>
 

<?php
$data = date('d/m/Y ');
$hora= date('H:i:s');
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->Port = 587;
$mail->Host = 'smtp.do host';
$mail->Username = 'email';
$mail->Password = 'senha do email';
$mail->SetFrom('email', "$nome");
$mail->SetFrom('email', "$nome");
$mail->AddAddress($email);
$mail->Subject = 'CONFIRMAÇÃO DE EMAIL';
$body="

Mensagem resposta para o usuario
";
$mail->MsgHTML($body);
$pasta = 'uploads/';
$arquivos = glob("$pasta{*.jpg,*.png,*.JPG,*.PNG, *png,*.gif,*.GIF,*.bmp}", GLOB_BRACE);
foreach($arquivos as $img){?>
 
<?php echo $mail->AddAttachment  ?>
<?php $mail->AddAttachment ($img);
}
if($mail->Send());
}
}

?>

como eu disse Bruno a mensagem chega perfeitamente , apenas não reseta o form após o envio, e estou testando o seu como base, e sem o recaptcha do google para ficar mais prático, por etapa para ver aonde estão os erros

William Bruno · Maio 7, 2015

Se você não colocar um echo alguma coisa, o ajax nunca vai saber que a requisição terminou, ai nunca entra no success e nunca reseta o form.

Acompanhe pelo Console para você ver, provavelmente a conexão ajax está ficando aberta para sempre ai, até dar timeout.

Ali, depois do $mail->Send(); coloca um

echo 'ok';

só para terminar a requisição do ajax.

Jeovane Carvalho · Maio 7, 2015

Ok Bruno irei fazer isso que você me disse e volto para dizer se tive êxito na sua dica.

Jeovane Carvalho · Maio 10, 2015

Se você não colocar um echo alguma coisa, o ajax nunca vai saber que a requisição terminou, ai nunca entra no success e nunca reseta o form.

Acompanhe pelo Console para você ver, provavelmente a conexão ajax está ficando aberta para sempre ai, até dar timeout.

Ali, depois do $mail->Send(); coloca um
echo 'ok';
só para terminar a requisição do ajax.

E aí Bruno desculpa a demora para responder, e fiz da maneira que você sugeriu, porém não deu certo, mas com a sua ideia fiz outros testes, e da maneira que testei acabou dando certo, tipo assim abri um if e coloquei o primeiro ALERT para ser chamado quando não for preenchido todos os campos, e no else coloquei o segundo ALERT, dando a ideia para o servidor de como foi tudo preenchido e o Recaptcha do GOOGLE do validado ele acaba chamando o 2º alert, como você é expert em Java só queria que me dissesse se esta correto, qual seria sua lógica correta, e se eu postei besteira aqui, vou postar abaixo o código Java como ficou:

<script type="text/javascript" src="http://www.jcimoveisbrasil.com/js/jquery.js"/></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#contactform_2').submit(function(){
beforeSend:$("#carregando").fadeIn(900);
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "enviarcontato.php",
data: dados,
success: function( data ){

<!---------- AQUI FIZ ESTE IF ABAIXO PARA PASSAR PELO PRIMEIRO ALERT, E CHAMAR O SEGUNDO ALERT ASSIM RESETANDO OS CAMPOS DO FORM ----->

if(data !=false){
alert( data );
complete:$("#carregando").fadeOut(2900); 
}else{
$("#name1").val("");	// Limpando todos os campos
$("#email").val("");
$("#telefone").val("");
$("#operadora").val("");
$("#mensagem").val("");
$("#recaptcha_response_field").val("");
alert("Mensagem enviada com Sucesso: A Jc Imóveis  Brasil agradece" );

complete:$("#carregando").fadeOut(1400); 
}
}
});
return false;
});
});
</script>

Eu fiz uma varredura em vários sites e fóruns e não vi nenhum site que usa o recaptcha do google que faça a validação na mesma página usando ajax, apenas fazendo reload por causa que o Recaptcha que precisa do ip do navegador para validar os caracteres, pelo menos não dei sorte de encontrar.. Aqui deixei o link funcionando... http://www.jcimoveisbrasil.com/contato_test.php

Jeovane Carvalho · Maio 18, 2015

Então William fiz conforme o link acima você poderia me dizer se esta correto da forma que fiz a execução do script e o loading ..

William Bruno · Maio 18, 2015

Sim, me parece correto. Está funcionando como você queria ?

Qual a dúvida ?

Jeovane Carvalho · Maio 19, 2015

Tipo assim , se você olhou meu código java que foi você que desenvolveu e apenas fiz pequenas modificações, e sobre o loading dentro dele que implantei quando o usuário fazer a requisição no servidor enviando o form disparar a mensagem de carregando se esta certo ou pode correr erro em outros navegadores de outros usuários, apesar de eu ter testado no ie 8 mozila firefox atualizado, chrome e opera, que são os mais usados..

Jeovane Carvalho · Maio 22, 2015

Ok Bruno obrigado pela sua ajuda e foi de grande importância para mim e nós sempre aprende mais um pouco, acho que é isso, valew.. :joia:

Arquivado

Zerar formulário após submit e confirmação do Recaptcha GOOGLE com Aja

Recommended Posts

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Criquio 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeovane Carvalho 6