Uncaught Error: ReCAPTCHA placeholder element must be an element or id
I'm adding ReCAPTCHA to a (Bootstrap Jekyll) website that has multiple contact forms. There's a popup modal in the footer, an occasional "contact us now" section, and also a "request more information about ____" on several pages.
Since I have multiple contact forms on a single page, I needed to explicitly render each ReCAPTCHA. Here's the code for that:
In my javascript:
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
};
In footer (included on all pages)
<div id="RecaptchaField1"></div>
(and at the bottom of the footer)
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
This works well on a page that has two separate contact forms (i.e. I've got another div on the page with the id of RecaptchaField2), but if I land on a page that only has one contact form, the console throws an error (Uncaught Error: ReCAPTCHA placeholder element must be an element or id).
The ReCAPTCHA seems to work anyway, but can anyone help me understand what's causing this error? All the research I've done indicates that it's from importing the library twice, but I'm assuming that's not the case, since the problem only comes up on some pages and not others.
Thank you!
jquery html recaptcha
asked Dec 14 '16 at 0:14
avpavp
861111
add a comment |
I'm adding ReCAPTCHA to a (Bootstrap Jekyll) website that has multiple contact forms. There's a popup modal in the footer, an occasional "contact us now" section, and also a "request more information about ____" on several pages.
Since I have multiple contact forms on a single page, I needed to explicitly render each ReCAPTCHA. Here's the code for that:
In my javascript:
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
};
In footer (included on all pages)
<div id="RecaptchaField1"></div>
(and at the bottom of the footer)
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
This works well on a page that has two separate contact forms (i.e. I've got another div on the page with the id of RecaptchaField2), but if I land on a page that only has one contact form, the console throws an error (Uncaught Error: ReCAPTCHA placeholder element must be an element or id).
The ReCAPTCHA seems to work anyway, but can anyone help me understand what's causing this error? All the research I've done indicates that it's from importing the library twice, but I'm assuming that's not the case, since the problem only comes up on some pages and not others.
Thank you!
jquery html recaptcha
asked Dec 14 '16 at 0:14
avpavp
861111
I just came across this issue, in my code there are multiple recaptcha bound to different fields, one of the field which recaptcha bound to is commented out & hence it gave this error, issue resolved after removing unwanted recaptcha
– Naga
Nov 28 '18 at 10:16
add a comment |
I'm adding ReCAPTCHA to a (Bootstrap Jekyll) website that has multiple contact forms. There's a popup modal in the footer, an occasional "contact us now" section, and also a "request more information about ____" on several pages.
Since I have multiple contact forms on a single page, I needed to explicitly render each ReCAPTCHA. Here's the code for that:
In my javascript:
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
};
In footer (included on all pages)
<div id="RecaptchaField1"></div>
(and at the bottom of the footer)
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
This works well on a page that has two separate contact forms (i.e. I've got another div on the page with the id of RecaptchaField2), but if I land on a page that only has one contact form, the console throws an error (Uncaught Error: ReCAPTCHA placeholder element must be an element or id).
The ReCAPTCHA seems to work anyway, but can anyone help me understand what's causing this error? All the research I've done indicates that it's from importing the library twice, but I'm assuming that's not the case, since the problem only comes up on some pages and not others.
Thank you!
jquery html recaptcha
asked Dec 14 '16 at 0:14
avpavp
861111
I'm adding ReCAPTCHA to a (Bootstrap Jekyll) website that has multiple contact forms. There's a popup modal in the footer, an occasional "contact us now" section, and also a "request more information about ____" on several pages.
Since I have multiple contact forms on a single page, I needed to explicitly render each ReCAPTCHA. Here's the code for that:
In my javascript:
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
};
In footer (included on all pages)
<div id="RecaptchaField1"></div>
(and at the bottom of the footer)
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
This works well on a page that has two separate contact forms (i.e. I've got another div on the page with the id of RecaptchaField2), but if I land on a page that only has one contact form, the console throws an error (Uncaught Error: ReCAPTCHA placeholder element must be an element or id).
The ReCAPTCHA seems to work anyway, but can anyone help me understand what's causing this error? All the research I've done indicates that it's from importing the library twice, but I'm assuming that's not the case, since the problem only comes up on some pages and not others.
Thank you!
jquery html recaptcha
jquery html recaptcha
asked Dec 14 '16 at 0:14
avpavp
861111
asked Dec 14 '16 at 0:14
avpavp
861111
asked Dec 14 '16 at 0:14
avpavp
861111
asked Dec 14 '16 at 0:14
avpavp
861111
asked Dec 14 '16 at 0:14
avpavp
861111
861111
I just came across this issue, in my code there are multiple recaptcha bound to different fields, one of the field which recaptcha bound to is commented out & hence it gave this error, issue resolved after removing unwanted recaptcha
– Naga
Nov 28 '18 at 10:16
add a comment |
I just came across this issue, in my code there are multiple recaptcha bound to different fields, one of the field which recaptcha bound to is commented out & hence it gave this error, issue resolved after removing unwanted recaptcha
– Naga
Nov 28 '18 at 10:16
I just came across this issue, in my code there are multiple recaptcha bound to different fields, one of the field which recaptcha bound to is commented out & hence it gave this error, issue resolved after removing unwanted recaptcha
– Naga
Nov 28 '18 at 10:16
I just came across this issue, in my code there are multiple recaptcha bound to different fields, one of the field which recaptcha bound to is commented out & hence it gave this error, issue resolved after removing unwanted recaptcha
– Naga
Nov 28 '18 at 10:16
add a comment |
2 Answers
2
active
oldest
votes
This works for me:
var CaptchaCallback = function() {
if ( $('#RecaptchaField1').length ) {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
}
if ( $('#RecaptchaField2').length ) {
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
}
};
answered Feb 17 '17 at 9:43
JennyJenny
18623
So simple, why didn't I think of that? I ended up using each(), but this would work just as neatly, since I've only got two or three on a page. Thank you!
– avp
Mar 11 '17 at 19:55
@Jenny your solution is correct worked for me Thanks!
– elegant-user
Aug 11 '17 at 6:36
face palm moment ty :)
– Andrew
Aug 18 '18 at 16:15
add a comment |
I got the same issue and this solution didn't work for me, but I have found one.
The fact was I used the plugin wordpress Contact form 7 and , unfortunately, I have written the keys of recaptcha in the integration part.
This made the function recaptcha/api.js was called twice and made this error.
So I have just deleted the plugin and reinstall it without fill the integration part and called the recatpcha in the files header.php and footer.php and that works :)
And don't forget to put the button recaptcha in the contact form
<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41132750%2funcaught-error-recaptcha-placeholder-element-must-be-an-element-or-id%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This works for me:
var CaptchaCallback = function() {
if ( $('#RecaptchaField1').length ) {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
}
if ( $('#RecaptchaField2').length ) {
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
}
};
answered Feb 17 '17 at 9:43
JennyJenny
18623
So simple, why didn't I think of that? I ended up using each(), but this would work just as neatly, since I've only got two or three on a page. Thank you!
– avp
Mar 11 '17 at 19:55
@Jenny your solution is correct worked for me Thanks!
– elegant-user
Aug 11 '17 at 6:36
face palm moment ty :)
– Andrew
Aug 18 '18 at 16:15
add a comment |
This works for me:
var CaptchaCallback = function() {
if ( $('#RecaptchaField1').length ) {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
}
if ( $('#RecaptchaField2').length ) {
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
}
};
answered Feb 17 '17 at 9:43
JennyJenny
18623
So simple, why didn't I think of that? I ended up using each(), but this would work just as neatly, since I've only got two or three on a page. Thank you!
– avp
Mar 11 '17 at 19:55
@Jenny your solution is correct worked for me Thanks!
– elegant-user
Aug 11 '17 at 6:36
face palm moment ty :)
– Andrew
Aug 18 '18 at 16:15
add a comment |
This works for me:
var CaptchaCallback = function() {
if ( $('#RecaptchaField1').length ) {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
}
if ( $('#RecaptchaField2').length ) {
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
}
};
answered Feb 17 '17 at 9:43
JennyJenny
18623
This works for me:
var CaptchaCallback = function() {
if ( $('#RecaptchaField1').length ) {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
}
if ( $('#RecaptchaField2').length ) {
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
}
};
answered Feb 17 '17 at 9:43
JennyJenny
18623
answered Feb 17 '17 at 9:43
JennyJenny
18623
answered Feb 17 '17 at 9:43
JennyJenny
18623
answered Feb 17 '17 at 9:43
JennyJenny
18623
18623
So simple, why didn't I think of that? I ended up using each(), but this would work just as neatly, since I've only got two or three on a page. Thank you!
– avp
Mar 11 '17 at 19:55
@Jenny your solution is correct worked for me Thanks!
– elegant-user
Aug 11 '17 at 6:36
face palm moment ty :)
– Andrew
Aug 18 '18 at 16:15
add a comment |
So simple, why didn't I think of that? I ended up using each(), but this would work just as neatly, since I've only got two or three on a page. Thank you!
– avp
Mar 11 '17 at 19:55
@Jenny your solution is correct worked for me Thanks!
– elegant-user
Aug 11 '17 at 6:36
face palm moment ty :)
– Andrew
Aug 18 '18 at 16:15
So simple, why didn't I think of that? I ended up using each(), but this would work just as neatly, since I've only got two or three on a page. Thank you!
– avp
Mar 11 '17 at 19:55
So simple, why didn't I think of that? I ended up using each(), but this would work just as neatly, since I've only got two or three on a page. Thank you!
– avp
Mar 11 '17 at 19:55
@Jenny your solution is correct worked for me Thanks!
– elegant-user
Aug 11 '17 at 6:36
@Jenny your solution is correct worked for me Thanks!
– elegant-user
Aug 11 '17 at 6:36
face palm moment ty :)
– Andrew
Aug 18 '18 at 16:15
face palm moment ty :)
– Andrew
Aug 18 '18 at 16:15
add a comment |
I got the same issue and this solution didn't work for me, but I have found one.
The fact was I used the plugin wordpress Contact form 7 and , unfortunately, I have written the keys of recaptcha in the integration part.
This made the function recaptcha/api.js was called twice and made this error.
So I have just deleted the plugin and reinstall it without fill the integration part and called the recatpcha in the files header.php and footer.php and that works :)
And don't forget to put the button recaptcha in the contact form
<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
add a comment |
I got the same issue and this solution didn't work for me, but I have found one.
The fact was I used the plugin wordpress Contact form 7 and , unfortunately, I have written the keys of recaptcha in the integration part.
This made the function recaptcha/api.js was called twice and made this error.
So I have just deleted the plugin and reinstall it without fill the integration part and called the recatpcha in the files header.php and footer.php and that works :)
And don't forget to put the button recaptcha in the contact form
<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
add a comment |
I got the same issue and this solution didn't work for me, but I have found one.
The fact was I used the plugin wordpress Contact form 7 and , unfortunately, I have written the keys of recaptcha in the integration part.
This made the function recaptcha/api.js was called twice and made this error.
So I have just deleted the plugin and reinstall it without fill the integration part and called the recatpcha in the files header.php and footer.php and that works :)
And don't forget to put the button recaptcha in the contact form
<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
I got the same issue and this solution didn't work for me, but I have found one.
The fact was I used the plugin wordpress Contact form 7 and , unfortunately, I have written the keys of recaptcha in the integration part.
This made the function recaptcha/api.js was called twice and made this error.
So I have just deleted the plugin and reinstall it without fill the integration part and called the recatpcha in the files header.php and footer.php and that works :)
And don't forget to put the button recaptcha in the contact form
<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
edited Nov 24 '18 at 21:30
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
answered Nov 24 '18 at 21:24
Hugo BlogueurHugo Blogueur
113
113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41132750%2funcaught-error-recaptcha-placeholder-element-must-be-an-element-or-id%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I just came across this issue, in my code there are multiple recaptcha bound to different fields, one of the field which recaptcha bound to is commented out & hence it gave this error, issue resolved after removing unwanted recaptcha
– Naga
Nov 28 '18 at 10:16