Multiple Forms With Captcha - Error on Ajax Submit

Question

Problem: I have a comment page with each comment box having a 'reply' button. Now the reply buttons have a jquery live click binding on them which when triggered loads the appropriate comment form via ajax. Besides the usual fields, each form contains a captcha input also. After the form submits successfully (or otherwise), i refresh the captcha, like so:

// submit triggered and form serialized
$.ajax({
 type: 'POST',
 url: myaction,
 data: serializedForm,
 cache: false,
 success: function(data, status) {
    //checks errors from server
    $servererr = $(data).find('.error_list');
    if($servererr.length === 0)
    {
      //flash success message...
      //refresh captcha
      $thisform.find('.captcha_img_refresh').trigger('click.refresh');
    }
    else {
       //flash the server errors and then refresh captcha         
      $thisform.find('.captcha_img_refresh').trigger('click.refresh');
    }
});

Now i have 2 fresh comment forms (f1 and f2) open on the same page (having 2 different actions, say /post/f1 and post/f2 respectively). I submit f1 and no errors reported. Then i go to the second form and enter all valid details and it throws captcha error from the server (so the else ajax statement above executes). Firebug shows:

> //for first form
> POST http://mysite.com/post/f1 302 Found 111ms
> GET http://mysite.com/post/f1 200 OK 600ms
> 
> //for 2nd form
> POST http://mysite.com/post/f2 200 OK 800ms

Why does this happen? Everything else seems fine (theres also no problem submitting forms with javascript turned off).

Form HTML:

<form id="comment-form-<unique-number>" class="comment-form-new" action="/post/<separate-action>" method="post" style="">
 <p>Leave a comment:</p>
   <ul>
    <li>
     <textarea rows="10" cols="71" name="myform[text]" id="myform_text"></textarea></li>
    <li>
     <label for="myform_username">Name (required)</label>
     <input type="text" name="myform[username]" value="Anonymous" id="myform_username" /></li>
   <li>
      <label for="myform_email">Email (required)</label>
      <input type="text" name="myform[email]" value="" id="myform_email" />
   </li>

   <li>
    <label for="myform_captcha">Please enter code shown below:</label>
     <input type="text" name="myform[captcha]" id="myform_captcha" />
   </li>
   <li>
     <img id="captcha_img" src="/mysite/captcha/126263" alt="Captcha Image">
     <!-- this refreshes captcha -->
     <a class="captcha_img_refresh" id="captcha_img_refresh"><img src="/images/reload_original.png" /></a>
   </li>
   <input type="hidden" name="myform[comment_id]" value="10" id="myform_comment_id" />
   <li>
     <input type="submit" value="Submit" id="comment-form-submit" />
   </li>
</ul>

Other details: After each comment form loads, i do normal submit binding (not live binding) on it. Values for each form are being serialized and sent as typed in the fields which one can confirm through console logs. I am using Cryptographp library (http://www.captcha.fr/) for captchas.

A Solution: If i refresh all captchas on all forms on the page after submitting any one form, some captchas show error images which can, of course, be fixed by the user by clicking the refresh button again. But i am looking for something other than this workaround.

Answer 1

Ok...i did some more testing and here's what i think is happening (I could be wrong also): the captcha image link, which is something like: /mysite/captcha/(a random number), is probably generated once on the server for each form. When i load f1 and then f2, a captcha link for f2 is stored at the backend which basically nulls f1's captcha link. Hence, if i submit f1 (which is still open), the captcha fails. So i guess i could try (on frontend):

1. Allowing only one reply form at a time
2. Cache the captcha link and use it again to regenerate image when user focuses on the corresponding form
3. Use the workaround mentioned above

Is there a backend way to solve this?