1

I'm trying to get my recaptcha to validate in my form via JQUERY/AJAX and PHP. I can just not get it to work. As soon as I press the recaptcha I get this error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data. Here is my code:

Here is my HTML code:

<!-- reCAPTCHA -->
<div class="text-center" style="text-align: center;">
    <div class="g-recaptcha mt-4" style="display: inline-block;" 
    data-sitekey="here_is_my_site_key">
    </div>   
</div>

Here is my AJAX code:

<script type="text/javascript">

$(document).ready(function()
{

    $('#submit').click(function(e) {

        e.preventDefault();


        var name = $("#name").val();

        var email = $("#email").val();

        var subject = $("#subject").val();

        var message = $("#message").val();


        $.ajax({

            type: "POST",

            url: "includes/mail.php",

            dataType: "json",

            data: {
                name: name,
                email: email,
                subject: subject,
                message: message, 
                captcha_response: grecaptcha.getResponse()
            },

            success: function(response)
            {
                if (response.code == 200) {
                    ShowAlert(response.msg_title, response.msg, response.msg_type);
                    $("#contact-form")[0].reset();
                    grecaptcha.reset();
                } else {
                    ShowAlert(response.msg_title, response.msg, response.msg_type);
                }
            },
            error: function(response) {
                ShowAlert('Er is iets misgegaan.', 'Neem a.u.b. telefonisch contact op met Light Site over dit probleem.', 'danger');
            }
        });
    });
});

At least a small push in the right way would be great.

Giovanni Wijma
  • 11
  • 4
  • The AJAX handler is explicitly expecting the server to return JSON data. What is the server returning? Check your browser's debugging tools, specifically the Network tab, to see the AJAX request/response. – David Jun 01 '20 at 16:08
  • @david I removed all data from the AJAX call + my PHP code and it still gives me the same error in the console which is weird. Can it have to do with .htaccess? I read it somewhere. – Giovanni Wijma Jun 01 '20 at 16:26
  • Are you randomly guessing or are you checking the browser's debugging tools to observe the server's response? – David Jun 01 '20 at 16:28
  • @david the only thing that I can really get from the network is the error, type, status etc. It shows it does a POST to the domain google.com and the type is JSON so that is correct. Only I find it hard to find where I give wrong data, since it doesnt show any lines where – Giovanni Wijma Jun 01 '20 at 17:37
  • Does the response contain anything in the body? If your using Chrome development tools then clicking on the request’s line in the network tab will have options to view the response body. – David Jun 01 '20 at 17:40
  • @david In google I see this request url: https://www.google.com/recaptcha/api2/reload?k=6Lc5f_4UAAAAABpgMY_ntiZ9mwMuMfUXQpEsRIvU, and the response body contains mostly hashed code, too much to copy – Giovanni Wijma Jun 01 '20 at 17:51
  • “mostly hashed code” in JSON format? Because the error is simply saying that it’s failing to parse data that isn’t JSON. – David Jun 01 '20 at 17:55
  • 1
    @david For what I see it is JSON. I found a perfect example of what happens to me. Otherwise I'm maybe not informative enough for you: https://stackoverflow.com/questions/35821051/google-recaptcha-json-syntax-error-returned-for-verifying-the-users-response – Giovanni Wijma Jun 01 '20 at 18:24

0 Answers0