How to deal with jquery ajax comments and captcha

Question

I am working on a comment system on a social network, I am using jquery, I can post the comments with ajax with no problem but sometimes I need a user to submit a captcha form if they are posting too many comments or for other reasons.

I think the best way to do this is to add it into the current comment posting part, if the php script returns a response, stating that we need to do a captcha form, then I would like to auto open up a dialog window on the screen, let the user fill in the captcha form, then carry on and post there comment.

This is somewhat complex for me but I have most of it done I think, maybe you can read my comments below and help me with the captcha part, mainly on how I can trigger a dialog to open, how I can pass the comment value/text through the captcha and back to the comment backen again on sucess and also if the user gets the captcha wrong, then it will reload the captcha

$.ajax({
    type: "POST",
    url: "processing/ajax/commentprocess.php?user=",
    data: args,
    cache: false,
    success: function (resp) {
        if (resp == 'captcha') {
            //they are mass posting so we need to give them the captcha form
            // maybe we can open it in some kind of dialog like facebox
            // have to figure out how I can pass the comment and user data to the captcha script and then post it
        } else if (resp == 'error') {
            // there was some sort of error so we will just show an error message in a DIV
        } else {
            // success append the comment to the page
        };
    }
});

Answer 1

I think I would opt for using the modal dialog that comes with the jQuery UI library. Then, I would wrap the AJAX call in a function so I could recursively call it. I would create a DIV (#captchaDialog) that handled displaying the Captcha Image and an Input (#captchaInput) for entering the answer. When the user click the OK button on the modal dialog, I would modify the original args with the new captcha response and recall the function. Since this solution simply modifies the original args and repasses it to the same URL, I believe this solution will work for you.

Some sample code, minus the div and input for the modal dialog:

var postComment = function(args) {
    $.ajax({
     type: "POST",
     url: "processing/ajax/commentprocess.php?user=",
     data: args,
     cache: false,
     success: function (resp) {
      if (resp == 'captcha') {
       $("#captchaDialog").dialog({
        bgiframe: true,
        height: 140,
        modal: true,
        buttons: {
         ok: function() {
         args.captchaResponse = $(this).find("#captchaInput").val();
         postComment(args);
         }
        }
       });
      } else if (resp == 'error') {
       // there was some sort of error so we will just show an error message in a DIV
      } else {
       // success append the comment to the page
      };
     }
    });
};

Hope this helps!

Answer 2

Side thought:

For best user experience I would highly consider implementing reverse CAPTCHA:

http://www.ccs.uottawa.ca/webmaster/reverse-captcha.html

I understand this doesn't address the needs of your question, but I had to at least mention this. It's a spam prevention method that doesn't require any input on behalf of your users.