#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    11
    Rep Power
    0

    ReCAPTCHA Javascript Form


    Hi,

    I am trying to integrate Google's reCAPTCHA into my PHP form that uses Javascript to process the information. I need the Javascript to post the necessary information to the action file that deals with the emailing.

    The form itself is one where it stays on the same page and updates the text to say 'Success' or 'Failure' depending on if the message has been sent or not.

    Anyway, after looking at Google's API and instructions I made two additions to the Javascript file (which I have put in bold):

    Code:
    jQuery(document).ready(function(){
    
    
    	$('#contactform').submit(function(){
    
    		var action = $(this).attr('action');
    
    		$('#submit').attr('disabled','disabled').after('<img src="contact-form/assets/ajax-loader.gif" class="loader" />');
    
    		$("#message").slideUp(750,function() {
    		$('#message').hide();
    
    		$.post(action, {
    			name: $('#name').val(),
    			email: $('#email').val(),
    			phone: $('#phone').val(),
    			comments: $('#comments').val(),
    			verify: $('#verify').val()
        	    challengeField: $("input#recaptcha_challenge_field").val();
        	    responseField: $("input#recaptcha_response_field").val();			
    			
    		},
    		
    			function(data){
    				document.getElementById('message').innerHTML = data;
    				$('#message').slideDown('slow');
    				$('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
    				$('#submit').removeAttr('disabled');
    				if(data.match('success') != null) $('#contactform').slideUp('slow');
    				
    				// 2 functions added by TrueThemes
    				if(data.match('success') != null) $("html,body").animate({
    					scrollTop: $("#message").offset().top
    					}, 1000, function(){
    						//scroll complete function
    					});
    				if(data.match('success') == null) $("html,body").animate({
    					scrollTop: $("#message").offset().top
    					}, 1000, function(){
    						//scroll complete function
    					});
    				
    				
    
    			}
    		);
    
    		});
    
    		return false;
    
    	});
    
    });
    Above is the complete Javascript file.

    Now this works with the reCAPTCHA, but the issue is that after adding those two lines, instead of being dynamic and updating the text, it now goes to the action page (contact.php), instead of just updating the current form page.

    Below is my form action page:

    Code:
    <?php
    	  //error_reporting(E_ALL ^ E_NOTICE); 
    	  require_once('./recaptchalib.php');
    	  $privatekey = "6LeyOeYSAAAAAOg3j8mm7GO6oEbFvHddHgei_OaF_";
    
    	  # was there a reCAPTCHA response?
    			$response = recaptcha_check_answer($privatekey,
    				$_SERVER["REMOTE_ADDR"],
    				$_POST["recaptcha_challenge_field"],
    				$_POST["recaptcha_response_field"]);
    		 
    				if ($response->is_valid) {
    						echo "Yes, that was correct!";
    				} else {
    						# set the error code so that we can display it
    				echo "Eh, That wasn't right. Try Again.";
    		 
    				}
    ?>
    I've tried to make it as clear as I can, but no doubt I've missed details so please feel free to ask any questions.

    For reference, I've uploaded the three necessary files to PasteBin:

    Form: http://pastebin.com/pJC7D6BE
    Form action: http://pastebin.com/HtKfdFA9
    JS: http://pastebin.com/RQ8xJ7TF

    Thanks.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    There maybe an error here; at least, I think it is:
    Code:
    verify: $('#verify').val()
    challengeField: $("input#recaptcha_challenge_field").val();
    responseField: $("input#recaptcha_response_field").val();
    You did not use commas (when adding the new parameters); instead..., you used semi-colons or nothing at all; to reference a continuous of parameters. I think you should try it this way and see what the end result is:
    Code:
    $.post(action, {
     name: $('#name').val(),
     email: $('#email').val(),
     phone: $('#phone').val(),
     comments: $('#comments').val(),
     verify: $('#verify').val(),
     challengeField: $("input#recaptcha_challenge_field").val(),
     responseField: $("input#recaptcha_response_field").val()	
    },
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    11
    Rep Power
    0
    Hi, thanks for the reply.

    You are right, and I didn't even notice that.

    So by correcting that, the form now works as a dynamic JS form staying on the same page, but I get an error (which is the original error I was trying to fix) saying:

    Code:
    ( ! ) SCREAM: Error suppression ignored for
    ( ! ) Notice: Undefined index: recaptcha_challenge_field in C:\wamp\www\lmb\contact-form\contact.php on line 9
    Call Stack
    #	Time	Memory	Function	Location
    1	0.0004	252912	{main}( )	..\contact.php:0
    
    ( ! ) SCREAM: Error suppression ignored for
    ( ! ) Notice: Undefined index: recaptcha_response_field in C:\wamp\www\lmb\contact-form\contact.php on line 10
    Call Stack
    #	Time	Memory	Function	Location
    1	0.0004	252912	{main}( )	..\contact.php:0
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,008
    Rep Power
    376
    in the code when you send it you are calling it challengeField, in the php file you are referring to recaptcha_challenge_field which doesnt exist..

    surely the error was "informative" enough for you to figure out what was wrong.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    11
    Rep Power
    0
    Originally Posted by paulh1983
    in the code when you send it you are calling it challengeField, in the php file you are referring to recaptcha_challenge_field which doesnt exist..

    surely the error was "informative" enough for you to figure out what was wrong.
    I didn't even think to do that. Fixed it!

    Thanks.

IMN logo majestic logo threadwatch logo seochat tools logo