php - ajax, jquery contact form with reCAPTCHA v2 - clears form if invalid -
so managed jquery/ajax contact form google recaptcha v2 work, if recaptcha isn't entered or invalid, form cleared, user have enter again. recaptcha takes extremely long load, maybe can overlooked easily. how can prevent clearing form?
i found solutions place php code in value of input fields, , htmlentities didn't quite understand, page form remain .html file. still possible prevent clearing form, or need make .html file .php file?
here form:
<div class="row"> <form id="ajax-contact" class="contact-form" role="form" method="post" action="mailer.php"> <div class="col-sm-4 col-sm-offset-2"> <div class="form-group"> <label for="name">name *</label> <input type="text" name="name" id="name" class="form-control" placeholder="name" required/> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label for="email">email *</label> <input name="email" id="email" class="form-control" placeholder="email" required/> </div> </div> <div class="row contact-wrap mymessage2"> <div class="col-sm-8 col-sm-offset-2"> <div class="form-group"> <label>message *</label> <textarea name="message" id="message" class="form-control" rows="8" placeholder="type message here." required></textarea> </div> <div class="form-group"> <div class="g-recaptcha" data-sitekey="6leehasuaaaaaildfzizj23ghh7ypgxwbfp_3te7"></div> </div> <div class="form-group"> <p> <button type="submit" name="submit" class="btn btn-primary btn-lg">submit message</button> </p> </div> </div> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <div id="form-messages"></div> </div> </div> </form> and here mailer.php called form:
<?php // if form submitted if ($_server["request_method"] == "post") { // if google recaptcha box clicked if(isset($_post['g-recaptcha-response']) && !empty($_post['g-recaptcha-response'])){ $captcha=$_post['g-recaptcha-response']; $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=mykey&response=".$captcha."&remoteip=".$_server['remote_addr']); $obj = json_decode($response); // if google recaptcha check successful if($obj->success == true) { $name = strip_tags(trim($_post["name"])); $name = str_replace(array("\r","\n"),array(" "," "),$name); $email = filter_var(trim($_post["email"]), filter_sanitize_email); $message = trim($_post["message"]); if ( empty($name) or empty($message) or !filter_var($email, filter_validate_email)) { http_response_code(400); echo "oops! there problem submission. please complete form , try again."; exit; } $recipient = "i-removed-this@for-now.com"; $subject = "new message $name"; $email_content = "name: $name\n"; $email_content .= "email: $email\n\n"; $email_content .= "message:\n$message\n"; $email_headers = "from: $name <$email>"; if (mail($recipient, $subject, $email_content, $email_headers)) { http_response_code(200); echo "thank you! message has been sent."; } else { http_response_code(500); echo "oops! went wrong, , couldn't send message. check email address."; } } // if google recaptcha check not successful else { echo "robot verification failed. please try again."; } } // if google recaptcha box not clicked else { echo "please click recaptcha box."; } } // if form not submitted // not post request, set 403 (forbidden) response code. else { http_response_code(403); echo "there problem submission, please try again."; } ?> and here app.js goes form:
$(function() { // form. var form = $('#ajax-contact'); // messages div. var formmessages = $('#form-messages'); // set event listener contact form. $(form).submit(function(e) { // stop browser submitting form. e.preventdefault(); // serialize form data. var formdata = $(form).serialize(); // submit form using ajax. $.ajax({ type: 'post', url: $(form).attr('action'), data: formdata }) .done(function(response) { // make sure formmessages div has 'success' class. $(formmessages).removeclass('error'); $(formmessages).addclass('success'); // set message text. $(formmessages).text(response); // clear form. $('#name').val(''); $('#email').val(''); $('#message').val(''); }) .fail(function(data) { // make sure formmessages div has 'error' class. $(formmessages).removeclass('success'); $(formmessages).addclass('error'); // set message text. if (data.responsetext !== '') { $(formmessages).text(data.responsetext); } else { $(formmessages).text('oops! error occured, , message not sent.'); } }); }); }); i appreciate help!
your recaptcha cases in php working fine , returning success responses. that's reason calling .done() method on $.ajax()
else { echo "robot verification failed. please try again."; } and
else { echo "please click recaptcha box."; } try adding error headers http_response_code(400); both of them
Comments
Post a Comment