We Keep Coding

reCaptcha not shows on my singlepage website

I have some problem with the recaptcha loading.
I trying to remake and modernize one of old my website to a singlepage one with php, javascript and ajax (no jquery!).
Everyting is fine yet, but the recaptca. I use the following method.
index.php contains the "main frame" and the target divs to the HTTPRequest function.
With AJAX I load the PHP page templates to the main target divs.
BUT when my PHP template file looks the following to show the registration last page with the captcha:
<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage(\'registration_page_2.php\')">« Back</button>
<button class="button btn-reg" onclick="validatePage(\'registration_validate.php\')">Submit your registration</button>
</div>
';
echo $template;
and I load it into one of my divs, the reCaptcha has not been shown. I tried some ways and tricks, but it's not working.
There is no form and submit section at all on my page. I do it with javascript and ajax.
Why I cannot make it works?
Is that possible to bypass form->submit->post method to get reCaptcha alive?
Or is the singlepage the wrong way?

I don't quite understand you but since i can't post a comment, i will attempt to answer anyway.
You don't have to use php to echo the html code, just in-case you didn't know, you can do it like this.
<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">« Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>
and I load it into one of my divs, the reCaptcha has not been shown. I
tried some ways and tricks, but its not works :(
It's hard to tell from the information you have given why it is not being shown
There is no form and submit section at all on my page. I do it with
javascript and ajax.
If your registration_page_2.php and registration_validate.php does not echo the template in your current .php shown, then it certainly wouldn't appear on your page
Why I cannot make it works? Is that possible to bypass
form->submit->post method to get reCaptcha alive? Or is the singlepage
the wrong way?
I think you just did something wrong in the middle. The way you have said is 'form->submit->post' is the right way to go about this
Can you help me to get the solution please?
Using your browser, inspect or view the source code of your page. (For google chrome the hotkey is CTRL+SHIFT+I) Try to find the elements in your page to see if they are loaded, but hidden due to css or the likes. After which, you should give more details.

update your captcha block with adding id recaptcha
<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
add following code in your page load
<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>

You can do it with php request
<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>

Document Ready, Fancybox and Ajax unable to open fancybox

On my parent I have the following
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox();
});
</script>
<span id="inlined" name="inlined" style="display:none;">
<h2>Send To blabla</h2>
<form id="contact" name="contact" action="#" method="post">
<label for="msg">Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
</form>
</span>
and am generating a page via an Ajax call which displays a link similar to the following:
<a class="various" href="#inlined">Open Fancy Form</a>
I have checked for errors in the console and have found none yet nothing happens when I click "Open Fancy Form". I have the same basic items on another page except the link is hard coded and it works fine. How do I get the link to open the Fancybox when it is generated via a php/ajax call?

If I understand your question correctly, then you have to call
$(".various").fancybox();
right after you have loaded your content.

if(ajaxRequest.readyState == 4){
var response = ajaxRequest.responseText;
triggerIT();
}
function triggerIT(){
setTimeout(function (){
$(".various").fancybox();
From what I could tell the fancybox had to be told to wait to trigger. a .500 wait seemed sufficient.

Open an URL and click a button on the newly loaded page

I am just starting to learn Javascript and I want to write a script that redirects to another URL, and after the URL has been loaded , it click on a "Next button and so on.
I am using the following script, which it is executed after a button press in the first html page:
function GoToURLAndClickNext() {
var w = window.open("file:///C:/test_click.html");
w.document.getElementById('button id').click();
}
test_click.html
looks like this:
<!DOCTYPE html>
<html>
<body>
<h1>Test button</h1>
<p>Test </p>
<button type="button" id="button id" onclick="alert('click event occured')">Click here</button>
</body>
</html>
Unfortunately the script does not work... It opens correctly the "test_click.html" document, but it does not automatically click on the "button id".
Is it possible to implement such behaviour? Ideally I would like to navigate over mutliple html pages in a tree-fashion way.
Thanks
z

Use onclick method in HTML?

I am making a website in which the login page has a button that is not setup as a button and it needs to call a function. I add the:
onclick="signin()"
to the code on line 216. (see code here: http://pastebin.com/Uq2nfWTQ)
I have tried adding the function below the div's and on a main.js file. Neither are working. Where should I put the function so that the button actually works? Also, the function is a redirect to a different page, so would I do that with:
window.location = "PUT LOCATION HERE"

This is the bare minimum of what you're describing:
<html>
<head>
<script>
function signin() {
console.log("Hello, I work!");
}
</script>
</head>
<body>
<form action="javascript:void(0);" method="get">
<input type="submit" value="Sign In" onclick="signin()">
</form>
</body>
</html>
Comparing that to your paste bin, you don't have a signin function anywhere.

Thus is an example
<!DOCTYPE html>
<html>
<body>
<p>Click the button to go to signin page.</p>
<button onclick="signin()">Try it</button>
<p id="demo"></p>
<script>
function signin() {
location.href = 'signin.php';
}
</script>
</body>
</html>

Some people have JavaScript disabled or hampered for various reasons; making a web page that requires JavaScript just to go to another page is super irritating for those people! (I am one of them.)
Plus, JavaScript-based navigation is never as useful as regular links. You can middle-click normal links to open them in a new tab, for example, and I do this all the time; it breaks on JavaScript-powered "fake" links, because the page's code can't run in the new tab. In general, using JavaScript to emulate an existing browser feature is a poor idea.
So if navigation is all you're doing, just make a regular link with an <a> and style it with CSS to look like a button. A good (albeit ugly) start:
a#signin-button {
display: inline-block;
background: lightgray;
border: 1px outset gray;
text-decoration: none;
}
OR, make it a plain submit button. (Not recommended as much, since you can't do as much with a submit button — e.g., middle-click to open in a new tab doesn't work.)
<form action="signin.html" method="GET">
<input type="submit" value="Sign In">
</form>

Why does the following script not open a new tab or page?

I am using a javascript function to navigate away from my website and to another website. I am also trying to open a new page when the button is clicked but instead it navigates on self instead of blank. Why does this happen?
HTML
<p style="text-align:center;">
<input style="font-size:large;" id="btamen" type="button" value="Visit Website">
</p>
JavaScript
<script type="text/javascript">
$("#btamen").click(function() {
window.location.href = 'http://www.google.com'
link.target = '_blank';
});
</script>

This line: window.location.href = 'http://www.google.com' will always replace current page with the new url.
I don't know what is link in the next page, but that code won't even execute because the page redirects and the context is lost.
If you want it like that, then do this:
window.open('http://www.google.com', '_blank').focus();
Also, you cannot guarantee its opening as browser might block it. Sort of kinda pop up blocker.

I don't think you can control it to open in a new tab. So you have to work around, what I did is:
<a href="" target="_blank" id="btamen_link">
<button type="button" id="btamen">
Click
</button>
</a>
And the jquery:
<script type="text/javascript">
$(document).ready(function(){
$('#btamen').click(function(){
$('#btamen_link').attr('href', 'http://www.google.com');
$('#btamen_link').click();
});
});
</script>