You are viewing limited content. For full access, please sign in.

Question

Question

Forms - Hide recaptcha with submit button using jquery

Forms Laserfiche Cloud
Updated September 14, 2022
asked on September 8, 2022 • Show version history

We have a customer conditionally hiding the submit button with

 $('.Submit').hide();

However for the same reason they are hiding the submit button, they want the recaptcha object to be hidden with it (since these 2 always go together)

If we add the following right below the command to hide submit

 $('#recaptchabox').hide();

Nothing happens.

If I manually go into the dev console, select the recpatchabox div and right click I can hide the element no problem.

 

0 0

Replies

replied on September 8, 2022

reCAPTCHA is rendered in an iframe. Are you sure the #recaptchabox element is actually part of the form page and not inside of the iframe?

1 0
View 2 previous replies
replied on September 12, 2022

Yes, the recaptchabox is the top level parent above the iframe.

0 0
replied on September 12, 2022 • Show version history

Interesting, it must be a difference with cloud because I don't see that element with self-hosted.

What happens when you run 

$('#recaptchabox').hide();

from the dev console as opposed to right-clicking and hiding it?

Another good test would be to add

console.log($('#recaptchabox').length);

To the code handling the show/hide condition to make sure it is detected.

0 0
replied on September 14, 2022

Entering $('#recaptchabox').hide(); in the console hides it.

I put the console.log to run right after my hide statement and it results in 0 length

There is no .show() that would re-show it

So I know my javascript is running and no other javascript is showing it again, I re-copied and pasted what I put in the console just to verify there was no typos.

Also this is all right next to the Submit hide code and that always works.

When I have more time I will create a button I can click on the form that hides it and see if that works.

 

0 0
replied on September 14, 2022 • Show version history

.length returning 0 means the element doesn't exist because even hidden elements would still be counted.

That tells me it is a timing issue. Since reCAPTCHA is an external resource it is probably loading asynchronously and not guaranteed to be present when document ready fires.

Set up a named function and use setTimeout to handle this on a delay.

In your function, check if the element exists using the .length method. If it does exist, run the hide code, if it doesn't exist run the delay again, and so on.

0 0
replied on September 14, 2022

Oh good catch, this is a good way to see if something doesn't exist on form load, I will check it out

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...