Multiple ReCaptcha is not working in single Mvc 4 RazorView

Question

I have used Google ReCaptcha in my MVC 4 web application.

i have one view page using two different ReCaptcha but only one is showing.

Answer 1

If you look at the HTML code, you will notice that the recaptcha ID is the same for both, which is causing the issue.

I was going to suggest the following:

=============

If you have a page with a modal, you may try using some logic and jQuery to do something like this:

// remove any existing recaptcha elements so we can present another
function removeCaptchaElement() {
    if ($("#recaptcha_widget_div").length == 0) {
        $('#recaptcha_widget_div').remove();
    }
}

This will ensure the there are no other elements on the page when you go to create your new recaptcha instance - kind of messy though.

=============

However this won't work because at the time of page creation, more than one modal control will exist on the page.

Alternately, you could display recaptcha without a plugin, and code accordingly.

You could also grab the source code from here, and add a new initialization parameter that takes in a unique ID value.

You could also just roll your own simple math/text-based captcha with Javascript.

Lastly, you could try this.