JSFiddle - React, Tailwind, and code Playground

by Lucas Brown

HTML

<script src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<form>
    <input type="hidden" name="recaptcha_challenge_field" value="" />
    <input type="text" name="recaptcha_response_field" placeholder="Enter the Words Below" required/>
    <br>
    <img class="recaptcha" height="57" width="300" src="">
    <br>	<a href="#" class="reload_captcha">Get another CAPTCHA</a>
    <br>
    <button>Submit</button>
</form>

JavaScript

$('form').after($('form').clone());

function reloadCaptcha(challenge) {
    $(':input[name=recaptcha_response_field]').val('');
    $(':input[name=recaptcha_challenge_field]').val(challenge);
    $('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c=' + challenge);
}

Recaptcha.finish_reload = function (challenge, b, c) {
    reloadCaptcha(challenge);
}

Recaptcha.challenge_callback = function () {
    reloadCaptcha(RecaptchaState.challenge);
}

Recaptcha.create("6LcTv-4SAAAAABfqKtvuofFAKnn9Lfo7vg658N2q");

$(document).on('click', '.reload_captcha', function(e){
    e.preventDefault();
    Recaptcha.reload();
});