I'm implementing in my site the part of the contact a reCAPTCHA
and it already appears on the page correctly, but I use Ajax
to send and validate the information and then started what I consider a problem, I saw in that post that the script sends via post
a value provided by reCAPTCHA, but how can I pass this value by Ajax
and validate and insert data in my Banco de Dados
?
What I have is this when the information is sent:
jQuery(document).ready(function() {
$("#submit_btn").on("click", function(event) {
var nome = $("#nomeCont").val();
var telefone = $("#telefone").val();
var email = $("#emailCont").val();
var cidade = $("#cidade").val();
var uf = $("#uf").val();
var assunto = $("#assunto").val();
var mensagem = $("#mensagem").val();
var gRecaptchaResponse = grecaptcha.getResponse()
$.ajax({
type: "POST",
url: "processo.php",
dataType: "json",
beforeSend: function() {
$(".resposta").html('enviando...');
},
data: {
'nome': nome,
'telefone': telefone,
'email': email,
'cidade': cidade,
'uf': uf,
'assunto': assunto,
'mensagem': mensagem,
'g-recaptcha-response': gRecaptchaResponse
},
success: function(json) {
if (json.tipo == "0") { // erro
$(".resposta").html("<span class='erro'>" + json.msg + "</span>");
} else { // sucesso
$(".resposta").html("<span class='sucesso'>" + json.msg + "</span>");
cleanFields();
}
}
});
event.preventDefault();
});
function clean() {
$(".resposta").html("");
}
});
My form looks like this:
<div class="resposta"></div>
<form name="contactForm" id="contact-form" class="contact-form" method="post" action="processo.php">
<fieldset>
<div class="form-group">
<div class="bg-warning form-alert"></div>
<input class="form-control" id="nomeCont" type="text" placeholder="NOME" />
</div>
<div class="form-group">
<div class="bg-warning form-alert"></div>
<input class="form-control" id="telefone" type="text" placeholder="TELEFONE" />
</div>
<div class="form-group">
<div class="bg-warning form-alert"></div>
<input class="form-control" id="emailCont" type="text" placeholder="E-MAIL" />
</div>
<div class="form-group">
<div class="bg-warning form-alert"></div>
<input class="form-control" id="cidade" type="text" placeholder="CIDADE" />
</div>
<div class="form-group">
<div class="bg-warning form-alert"></div>
<input class="form-control" id="uf" type="text" placeholder="UF" />
</div>
<div class="form-group">
<div class="bg-warning form-alert"></div>
<input class="form-control" id="assunto" type="text" placeholder="ASSUNTO" />
</div>
<div class="form-group">
<textarea class="form-control" id="mensagem" placeholder="MENSAGEM"></textarea>
</div>
<div class="g-recaptcha" data-sitekey="MinhaChave"></div>
<br>
<button type="submit" class="btn btn-primary" id="submit_btn">Enviar</button>
</fieldset>
</form>
</div>
The page that processes the information and writes to the Database looks like this:
/*---------------------------------------- OPERAÇÃO - INSERIR -----------------------------------------*/ $nome = $_POST['nome']; $telefone = $_POST['telefone']; $email = $_POST['email']; $cidade = $_POST['cidade']; $uf = $_POST['uf']; $assunto = $_POST['assunto']; $mensagem = nl2br($_POST['mensagem']); // VALIDAÇÃO DOS DADOS if ($nome == "") { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe seu nome."; header('Content-Type: application/json'); echo json_encode($arr); exit; } if ($telefone == "") { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe seu telefone."; header('Content-Type: application/json'); echo json_encode($arr); exit; } if ($email == "") { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe seu e-mail."; header('Content-Type: application/json'); echo json_encode($arr); exit; } if ($cidade == "") { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe sua cidade."; header('Content-Type: application/json'); echo json_encode($arr); exit; } if ($uf == "") { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe sua UF."; header('Content-Type: application/json'); echo json_encode($arr); exit; } if ($assunto == "") { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe um assunto."; header('Content-Type: application/json'); echo json_encode($arr); exit; } if ($mensagem == "") { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe uma mensagem."; header('Content-Type: application/json'); echo json_encode($arr); exit; } // VALIDAÇÃO DO E-MAIL $valida = $email; $expresao = "/^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/"; // RETORNO DOS DADOS if(!preg_match($expresao, $valida)) { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, informe um e-mail válido."; header('Content-Type: application/json'); echo json_encode($arr); exit; } if (isset($_POST['g-recaptcha-response'])) { $captcha_data = $_POST['g-recaptcha-response']; } // Se nenhum valor foi recebido, o usuário não realizou o captcha if (!$captcha_data) { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Por favor, confirme o captcha."; exit; } $resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MinhaChave&response=".$captcha_data."&remoteip=".$_SERVER['REMOTE_ADDR']); if ($resposta.success) { // INSERINDO NO BANCO DE DADOS mysql_select_db($database_conexao, $pcon); $sql = "INSERT INTO contato (nome, telefone, email, cidade, uf, assunto, mensagem) VALUES ('$nome', '$telefone', '$email', '$cidade', '$uf', '$assunto', '$mensagem')"; $query = @mysql_query($sql,$pcon); if ($query) { $arr["msg"] = "Registro inserido com sucesso."; // ENVIANDO E-MAIL PARA ADMINISTRADOR include('email-notificacao.php'); } else { $arr["tipo"] = "1"; $arr["msg"] = "Erro: " . $sql . "
" . mysql_error($pcon); } } else { $arr["tipo"] = "1"; $arr["msg"] = "Erro: Usuário mal intencionado detectado. A mensagem não foi enviada."; } // FECHA CONEXÃO COM BD mysql_close($pcon); // RETORNAR STATUS - MENSAGEM DA EXECUÇÃO header('Content-Type: application/json'); echo json_encode($arr);
But as I said, it is not working, without the captcha sending the information work perfectly.