Geek Answers Handbook

How to handle jquery ajax and captcha comments

I am working on a comment system on a social network, I use jquery, I can leave comments with ajax without problems, but sometimes I need a user to submit a captcha form if they post too many comments or for other reasons.

I think the best way to do this is to add it to the current part of posting comments, if the php script returns a response stating that we need to make the captcha form, then I would like to automatically open the dialog box on the screen, let the user fill in the captcha form, and then continue and post a comment.

This is somewhat difficult for me, but I have most of it, I think maybe you can read my comments below and help me with the captcha part, mainly about how I can open a dialog to open, how I can go through comment value / text through captcha and back to the comment, again reinforcing success, and also, if the user reads the code incorrectly, then he 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 }; } });
+4
source share
2 answers

I think I'd rather use the modal dialog that comes with the jQuery user interface library . Then I would wrap the AJAX call with a function so that I can call it recursively. I would create a DIV (#captchaDialog) that handled the display of the Captcha Image and Input (#captchaInput) to input the response. When the user clicks the “OK” button in the modal dialog, I would change the original arguments with the new “captcha” responder and call the function. Since this solution simply changes the original arguments and passes it to the same URL, I believe that this solution will work for you.

Some code examples, minus div and input for 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!

+5
source

Side of thought:

For a better user experience, I would really like to consider implementing the reverse CAPTCHA:

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

I understand that this does not concern the needs of your question, but I should at least mention it. This is a spam prevention method that does not require input on behalf of your users.

0
source

More articles:


All Articles