on my website I have an ajax form with google recaptcha. I am using event.preventdefault() to keep the page from reloading. Before I added the captcha everything was working fine. However, now whenever I try to submit the form I always get the error message that the captcha was not ticked even when it was.
If i remove the event.preventdefault() everything is working fine, even with the captcha, only that I get redirected to my submission.php.
Are google recaptcha v2 and event.preventdefault() generally incompatible?
And what can I do to have a captcha and keep the page from reloading?
EDIT
JAVASCRIPT:
$(document).ready(function() {
$("#contactform").submit(function(event) {
$(".form-group").removeClass("has-error"), $(".help-block").remove();
event.preventDefault()
var formData = {
name: $("input[name=name]").val(),
email: $("input[name=email]").val(),
message: $("textarea[name=message]").val()
};
$.ajax({
type: "POST",
url: "http://example.com/form-submission.php",
data: formData,
dataType: "json",
encode: true
}).done(function(data) {
if ( ! data.success) {
if (data.errors.name) {
$('#name-group').addClass('has-error'); // add the error class to show red input
$('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input
}
if (data.errors.email) {
$('#email-group').addClass('has-error'); // add the error class to show red input
$('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
}
if (data.errors.message) {
$('#message-group').addClass('has-error'); // add the error class to show red input
$('#message-group').append('<div class="help-block">' + data.errors.message + '</div>'); // add the actual error message under our input
}
if (data.errors.captcha) {
$('#captcha-group').addClass('has-error'); // add the error class to show red input
$('#captcha-group').append('<div class="help-block">' + data.errors.captcha + '</div>'); // add the actual error message under our input
}
} else {
$("#contactheadline").append('<div class="submissionsuccess">' + data.message + "</div>");
document.getElementById("contactform").style.display = "none";
}
});
});
});
PHP:
<?php
$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data
function post_captcha($user_response) {
$fields_string = '';
$fields = array(
'secret' => '_key_',
'response' => $user_response
);
foreach($fields as $key=>$value)
$fields_string .= $key . '=' . $value . '&';
$fields_string = rtrim($fields_string, '&');
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,
'https://www.google.com/recaptcha/api/siteverify');
curl_setopt($ch, CURLOPT_POST, count($fields));
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, True);
$result = curl_exec($ch);
curl_close($ch);
return json_decode($result, true);
}
// Call the function post_captcha
$res = post_captcha($_POST['g-recaptcha-response']);
if (empty($_POST['name']))
$errors['name'] = 'Name is required.';
if (empty($_POST['email']))
$errors['email'] = 'Email is required.';
if (empty($_POST['message']))
$errors['message'] = 'Message is required.';
if (!$res['success'])
$errors['message'] = 'Please tick the Captcha.';
if (!empty($errors)) {
$data['success'] = false;
$data['errors'] = $errors;
} else {
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];
$email_from = 'form-submission#example.com';address
$to = "info#example.com";
$email_subject = "New Form submission";
$email_body = "You have received a new message from $name ($visitor_email). \n $message \r\n".
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email";
mail($to,$email_subject,$email_body,$headers);
$data['success'] = true;
$data['message'] = "Thank you for contacting us! We have received your message and will get back to you shortly.";
}
// return all data to an AJAX call
echo json_encode($data);
?>
Thank you in advance!
As i expected, you are not sending the entire form but only 3 elements (name, email and message). That's why your recaptcha is invalid, try sending the entire form instead:
var form = document.getElementById("contactform");
// or with jQuery
//var form = $("#contactform")[0];
$.ajax({
// the formData function is available in almost all new browsers.
data: new FormData(form),
// Rest of your configuration
});
Related
I'm working on a contact website, where I want to have contact form. I want it to send data to e-mail and I want it to be checked by Google's recaptcha v3.
This is my second try. In the past, I've done it successfully without recaptcha. Now, I used this (https://codeforgeek.com/google-recaptcha-v3-tutorial/) tutorial, with following result:
script below the form
// when form is submit
$('#myform').submit(function() {
// we stoped it
event.preventDefault();
var mail = $('#email').val();
var comment = $("#sprava").val();
// needs for recaptacha ready
grecaptcha.ready(function() {
// do request for recaptcha token
// response is promise with passed token
grecaptcha.execute('__SITE-KEY__', {action: 'create_comment'}).then(function(token) {
// add token to form
$('#myform').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
$.post("form.php",{mail: mail, comment: comment, token: token}, function(result) {
if(result.success) {
alert('Thanks for message')
} else {
alert('An error occured')
}
});
});;
});
});
</script>
the names of html form fields are "email", "vyber", "sprava"
form.php
<?php
$mail;$comment;$captcha;
$mail = filter_input(INPUT_POST, 'mail', FILTER_VALIDATE_EMAIL);
$comment = filter_input(INPUT_POST, 'comment', FILTER_SANITIZE_STRING);
$captcha = filter_input(INPUT_POST, 'token', FILTER_SANITIZE_STRING);
}
function email_sending(){
$webmaster_email = "bla#bla.com";
$sender_email= "blabla#bla.com" ;
$email_address = $_REQUEST['email'] ;
$selection = $_REQUEST['vyber'] ;
$message = $_REQUEST['sprava'];
$msg =
"E-mail: " . $email_address . "\r\n" .
"I'm interested in " . $selection . "\r\n" .
"Message: " . $message ;
mail( "$webmaster_email", "You have mail", $msg, $header);
}
if($responseKeys["success"]) {
echo json_encode(array('success' => 'true'));
email_sending();
} else {
echo json_encode(array('success' => 'false'));
}
?>
The problem isn't within recaptcha part, but then I recieve e-mail, where data is missing. (it shows only variable names, not actual values). I might think it's because of naming in script, as I'm not sure what to write in declaration of variables. I'd be glad to receive any input about this problem.
I managed to solve this problem by changing server-side code like below, thanks to this Recaptcha tutorial.
// Check if form was submitted:
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {
// Build POST request:
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = '__SECRET-KEY___';
$recaptcha_response = $_POST['recaptcha_response'];
// Make and decode POST request:
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
// Take action based on the score returned:
if ($recaptcha->success == true) {
// Verified - send email
} else {
// Not verified - show form error
}
}
I'd like to improve the contact form code (from a theme that I'm using) as it seems very basic and not secure at all (although I like in the current code the nice and smooth messages when a field is not filled in properly, or when the form is sent sucessfullly).
So, in order to make it more secure, I'd like to integrate PHPMailer to it.
Unfortunately, as I'm not very familiar with JS and PHP, I'm not sure where I should start? I'm assuming that I should somehow call PHPMailer just after //proceed with PHP email in the code below?
PHP:
<?php
if($_POST) {
$to_Email = "greg#dfsfsfsdfsfdsds.com"; //Replace with recipient email address
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type'=> 'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userSubject"]) || !isset($_POST["userMessage"])) {
$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
die($output);
}
//additional php validation
if(empty($_POST["userName"])) {
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(!filter_var($_POST["userEmail"], FILTER_VALIDATE_EMAIL)) {
$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if(strlen($_POST["userMessage"])<5) {
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
//proceed with PHP email.
$headers = 'From: '.$_POST["userEmail"].'' . "\r\n" .
'Reply-To: '.$_POST["userEmail"].'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
// send mail
$sentMail = #mail($to_Email, $_POST["userSubject"], $_POST["userMessage"] .' -'.$_POST["userName"], $headers);
if(!$sentMail) {
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
} else {
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$_POST["userName"] .' Thank you for your email'));
die($output);
}
}
?>
JS:
/*******************
* Contact Form JavaScript
********************/
$(document).on("ready",function() {
$("#email-form [type='submit']").click(function(event) {
event.preventDefault();
//get input field values
var user_name = $('input[name=name]').val()
var user_email = $('input[name=email]').val()
var user_subject = $('input[name=subject]').val()
var user_message = $('textarea[name=message]').val()
//data to be sent to server
post_data = {'userName':user_name, 'userEmail':user_email, 'userSubject':user_subject, 'userMessage':user_message}
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
//load json data from server and output message
if(response.type == 'error') {
output = '<div class="error-message"><p class="from">'+response.text+'</p></div>'
} else {
output = '<div class="success-message"><p class="seuccses">'+response.text+'</p></div>'
//reset values in all input fields
$('#email-form input').val('')
$('#email-form textarea').val('')
}
$("#result").hide().html(output).slideDown()
}, 'json')
});
//reset previously set border colors and hide all message on .keyup()
$("#email-form input, #email-form textarea").keyup(function() {
$("#result").slideUp()
})
});
Can anybody help me with this? I am not highly proficient in coding but know enough to get by. The issue is that the form can be filled out but in the telephone number field it won't accept spaces and 2) when it is filled out properly it does not return a value of "submitted".
Any help is greatly appreciated.....
$("#ajax-contact-form").submit(function() {
var str = $(this).serialize();
var href = location.href.replace(/dark\/|video\/|slider\/|contact\.html/g,'');
$.ajax({
type: "POST",
url: href + "contact_form/contact_process.php",
data: str,
success: function(msg) {
// Message Sent - Show the 'Thank You' message and hide the form
if(msg == 'OK') {
$(this).addClass('success').find('span:eq(1)').html('success');
} else {
$(this).addClass('error').find('span:eq(1)').html('error');
}
}
});
return false;
});
and the PHP code
<?php
include dirname(dirname(__FILE__)).'/mail.php';
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post){
$name = stripslashes($_POST['name']);
$email = trim($_POST['email']);
$phone = stripslashes($_POST['phone']);
$message = stripslashes($_POST['message']);
$mail = mail(CONTACT_FORM, $phone, $message,
"From: ".$name." <".$email.">\r\n"
."Reply-To: ".$email."\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail){
echo 'OK';
}
}
?>
your data is the wrong syntax you need to define it and then put the key in it i.e.
data: {str: str},
http://api.jquery.com/jQuery.ajax/
The script below helps with processing of a form that request number and name values, and than sends it to process.php and also displays a confirmation and hides the button that would fired the modal to the form so user cannot retry to fill the form.
Script to handle pass data to process.php
$(document).ready(function () {
function successHandler(){
console.log('Success');
$("#thanks").html(msg);
$('#form-content').modal('hide');
}
function errorHandler(){
console.log('Error');
alert("Error");
}
var nameval = $('#name').val();
var numberval = $('#number').val();
$("form#contact").submit(function(){
$.ajax({
type: "POST",
url: "process.php",
data: {
name: nameval,
number: numberval,
submit: true
},
success: function(msg){
$("#thanks").html(msg);
$('#form-content').modal('hide');
return false;
},
error: function(){
alert("Error");
return false;
}
});
return false;
});
});
The whole action does generate an email with HTML from the process.php script but does not include the data that was captured from the form, I believe there is a error within this script as I cannot find anything on the form or process.php that is using PHPMail() doing anything wrong.
Could you help?
Update
<?php
if (isset($_POST['submit'])) {
$name = ($_POST['name']);
$number = ($_POST['number']);
echo "<span class=\"alert alert-success\">THANKS! SUBMITTED</span>";
$to = "EMAIL BLANKED";
$subject = "Alert!";
$message = "name: $name number: $number";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// More headers
$headers .= 'From: <email blank>' . "\r\n";
mail($to,$subject,$message,$headers);
}
else { echo '<div class="alert alert-error">Error</div>' ; }
?>
You should put this two lines:
var nameval = $('#name').val();
var numberval = $('#number').val();
inside the submit function like this
$("form#contact").submit(function(){
var nameval = $('#name').val();
var numberval = $('#number').val();
because if you set the values of the variables before the submission of the form the inputs will most likely be empty.
I have : Html + jQuery + ajax post and a PHP file to process the form values and returning a error(true or false) and a message with html markups.
My javascript code:
$(document).ready(function() {
var form = $('#form'); // contact form
var submit = $('#submit'); // submit button
var alert = $('.alert'); // alert div for show alert message
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: 'contact.php', // form action url
type: 'post', // form submit method get/post
dataType: 'json', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
submit.html('Sending....'); // change submit button text
},
success: function(result) {
if(result.error){
/* On error stuff */
alert(result.html).fadeIn();
}else{
/* On success stuff */
alert(result.html).fadeIn();
}
}
});
});
});
and at last my php:
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
$result = array("error" => false, "html" => null);
$vars = array('name', 'email','telefoonnummer', 'message');
$verified = TRUE;
foreach($vars as $v) {
if(!isset($_POST[$v]) || empty($_POST[$v])) {
$verified = FALSE;
}
}
if(!$verified) {
$result["error"] = true;
$result["html"] = "<b>Error11</b>";
echo json_encode($result);
exit;
}
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$tel= filter_var($_POST['telefoonnummer'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
$to = '';
$sent = email($to, $email, $name, $tel, $message);
if ($sent) {
$result["error"] = false;
$result["html"] = "<b>Success</b>";
echo json_encode($result);
} else {
$result["error"] = true;
$result["html"] = "<b>Error</b>";
echo json_encode($result);
}
return;
}
/**
* Email send with headers
*
* #return bool | void
**/
function email($to, $name, $email, $tel, $message){
$header = array();
$header[] = "MIME-Version: 1.0";
$header[] = "From: <".$name."> <".$email.">";
/* Set message content type HTML*/
$header[] = "Content-type:text/html; charset=iso-8859-1";
$header[] = "Content-Transfer-Encoding: 7bit";
if( mail($to, $tel, $message, implode("\r\n", $header)) ) return true;
}
Ok.. now that's clear I know something goes wrong with the error returning, it does show up and then goes away again n my html so I don't know what exactly happens there..
I don't want "fixes" just so i can copy paste the code but an explanation of what happened and what goes wrong and how to solve it (at least then I learn a little)
You are using alert in two different ways... One time as an object, one time as a function. The latter is probably what causes the undesired effect. Look closely at the brackets after alert;
alert() is a function
alert. signafies it's an object
We cannot use jquery chaining method in alert function.