Whats wrong with my javascript? recaptcha

JavaScript
1

I have javascript that counts a timer lets say from 10 seconds.
That part works just fine!But the idea is that it show google captcha after theese 10 seconds but it just wont happens !:frowning:

here is my javascript:



<script> 
var seconds_left = "<?php echo $row['time']; ?>";
var interval = setInterval(function() {
    document.getElementById('timer_div').innerHTML = --seconds_left;

    if (seconds_left <= 0)
    {
	   var content = "<div class='g-recaptcha' data-sitekey='keyhere' style='transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;'></div>";
       document.getElementById('timer_div').innerHTML = content;
       clearInterval(interval);
    }
	}, 1000);
</script>

<div id="timer_div"></div>
2

it works well if i enter some text in that captcha div place

3

What are you expecting that to do? Looking at the rest of the code, I’m assuming you’re running it in your browser, which has no understanding of PHP (even if it wasn’t just a string you’re setting seconds_list to). Have you checked what error messages you’re getting in the browser console?

4

that works echo $row[‘time’] is a time variable . echo $row[‘time’] = 10 seconds

5

at the first timer are counting backwards from 10 , and when it hits 0 it should echo captcha

6

Where is this code being run? At the client, or on a server?

7

On my site inside php file for client side

8

I set up a Codepen just to test it out, and sure enough, it does count down without a problem, once you hard code a value for seconds_left. The thing I can’t see though, is anywhere for the captcha to come from (file ref?). At the moment, all the code does is output the value of the timer. Is there some more code we should be seeing (PHP?)?

1 Like
9

see this

    if (seconds_left <= 0)
    {
	   var content = "<div class='g-recaptcha' data-sitekey='keyhere' style='transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;'></div>";
       document.getElementById('timer_div').innerHTML = content;
       clearInterval(interval);
    }
	}, 1000);

see that div inside var content?
that is google captcha. replace that div with anything and it will show it!

    if (seconds_left <= 0)
    {
	   var content = "JUST FOR TEST";
       document.getElementById('timer_div').innerHTML = content;
       clearInterval(interval);
    }
	}, 1000);

this will show up

11

If the .g-recaptcha element is not present from the start, you’ll have to render it explicitly:

<script src="https://www.google.com/recaptcha/api.js?onload=gRecaptchaReady&render=explicit" async defer></script>

function gRecaptchaReady () {
  var secondsLeft = 10
  var timerDiv = document.getElementById('timer_div')

  var interval = setInterval(function() {
    timerDiv.innerHTML = --secondsLeft;

    if (secondsLeft <= 0) {
      grecaptcha.render(
        timerDiv,
        { sitekey: 'keyhere' }
      )

      clearInterval(interval)
    }
  }, 1000)
}

BTW, it’s really not good practice to generate JS code with PHP… jumbling languages like that quickly gets hard to read, maintain and debug. For example, if for some reason $row['time'] happens to be an empty string, you’ll get a syntax error and your script breaks. A more reliable way to pass that value would be as a data-* attribute in an associated HTML element, like

<div id="timer_div" data-time="<?= $row['time'] ?>"></div>

var timerDiv = document.getElementById('timer_div')
var secondsLeft = timerDiv.dataset.time || 0
2 Likes
12

Hey this really worked!Just the issue is that i need that style to be used for it

style='transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;'

13

You can just put that in your CSS file (I’m assuming you’re using one). Something like

.elementClass {
   transform: scale(0.77);
   -webkit-transform: scale(0.77);
   transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
}
2 Likes
14

Yes that worked thanks :slight_smile:

1 Like
15

Thanks guys you helped me allot :slight_smile:

2 Likes
16

I found just one issue after countdown ends 0 stays but it should be replaced with captcha

17

Ah yes, the captcha will get appended to the container element, not replace its content – just set timerDiv.innerHTML = '' before calling the .render() method.

1 Like
18

Yep hat did the job :slight_smile: thanks again you are the best :slight_smile:

1 Like
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.