jQuery OpenCaptcha

jQuery to make use of OpenCaptcha.com's CAPTCHA service. Note, it requires that you have a simple proxy set up to make the cross-domain request call on the server side.

by sheppe

HTML

<form id="capSubmit">
    <p>Please prove you are human by entering the following characters into the textbox below:</p>
    <div>
        <img id="dacap" />
        <input name="img" id="dahiddencap" type="hidden"></input>
    </div>
    <div>
        <input name='guess' type='text'></input>
    </div>
    <div>
        <input type="submit" value="Submit"></input>
    </div>
</form>

JavaScript

var GetFileName = function()
{
    var now = new Date();
    return now.getDate().toString() + now.getMonth().toString() + now.getYear().toString() + document.domain + '-80-240.jpgx';
};

var filename = GetFileName();
$('#dacap').attr('src', 'http://www.opencaptcha.com/img/' + filename);
$('#dahiddencap').attr('value', filename);

$("#capSubmit").submit(function(event) {
    
    /* stop form from submitting normally */
    event.preventDefault();
    
    /* get some values from elements on the page: */
    var $form = $( this ),
        guess = $form.find( 'input[name="guess"]' ).val(),
        url = 'proxy.php?http://www.opencaptcha.com/validate.php?img=' + filename + '&ans=' + guess;
    
    /* Send the data using post */
    var results = $.ajax({
        url: url, 
        dataType: 'html', 
        success: function(data){
            if(data == 'pass')
            {
                // Allow form submission.
            }
            else
            {
                // The user guessed wrong.
            }
        }
    });
});