Add recaptcha to a div - javascript

I have the following snippet:
<html>
<head>
</head>
<body>
<form>
<div id='mydiv'>
</div>
</form>
</body>
</html>
I want to add "recaptcha" inside #mydiv usign a javascript code given at https://developers.google.com/recaptcha/docs/display just before </body>:
I tried to use the following code:
<script>
var mydiv = document.getElementById('mydiv');
var script = document.createElement('script');
script.type = "text/javascript";
script.src = 'http://www.google.com/recaptcha/api/challenge?k=6LeZBs8SAAAAAFnpP1frAONoZH-I-W9HOm0RQgV0';
mydiv.appendChild(script);
</script>
But it doesn't work. It only paste the script code. It doesn't run it.
Do you have any idea how to do this?
Thanks.

Here you go taken from the example code on your link see fiddle,
http://jsfiddle.net/GVwZ4/1/
in a div
http://jsfiddle.net/GVwZ4/2/
<body>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6LeZBs8SAAAAAFnpP1frAONoZH-I- W9HOm0RQgV0">
</script>
<div></div>
</body>

Related

why doesn't this jquery html() function work?

I created this very basic example of a jquery html() function but it doesn't work:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var html = "<div>Test</div>";
$('#TestDiv').html(html);
</script>
</head>
<body>
<div id="TestDiv" style="height:50px;width:50px;border:1px solid black;"></div>
</body>
</html>
View on JSBin
Any idea what the issue might be?
You miss put it on docmuent ready
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function()
{
var html = "<div>Test</div>";
$('#TestDiv').html(html);
}
);
</script>
</head>
<body>
<div id="TestDiv" style="height:50px;width:50px;border:1px solid black;"></div>
</body>
</html>
put your script after div tag
or if you want to keep the script within the head tag then you need to included it in $(), like so:

Javascript - Iframe load all parent window scripts?

How do I make an iframe load all parent window's scripts?
I was thinking something like this:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="somethingelse.js"></script>
</head>
<body>
<iframe>
<html>
<head>
<script>
for (var i=0;i<window.parent.document.scripts.length;i++){
var script = window.parent.document.scripts[i];
//now it should append 'script' to document.scripts (this iframe scripts array)
}
</script>
</head>
<body>
</body>
</html>
</iframe>
</body>
</html>
PS: I made it as simple as possible. The real code is much bigger.
Try:
for (var i in window.parent.document.scripts){
var parentScript = window.parent.document.scripts[i];
var newScript = document.createElement('script');
if(parentScript.src)
newScript.src = parentScript.src;
if(parentScript.innerHTML)
newScript.innerHTML = parentScript.innerHTML;
document.head.appendChild(newScript);
}

How to 'output' a JavaScript variable into an HTML div

I have a JavaScript variable and I want the HTML div to output 7.
I know it's simple, but I can't seem to get my head around this.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ball = 3+4;
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
Give a specific id to the div like:
<div id="data"></div>
Now use the following JavaScript code.
<script type="text/javascript">
var ball = 3+4;
document.getElementById("data").innerHTML=ball;
</script>
Working code is here
Write your script in body.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Have 7 output here</div>
<script type="text/javascript">
var ball = 3+4;
document.getElementsByTagName('div')[0].innerHTML = ball;
</script>
</body>
</html>
Try this:
<head>
<script type="text/javascript">
var ball = 3+4;
function op()
{
document.getElementById('division').innerHTML=ball;
}
</script>
</head>
<body onload="op();">
<div id="division">Have 7 output here</div>
</body>
Fiddle
HTML
<html>
<body>
<div id="add_results_7"></div>
</body>
</html>
JavaScript
<script>
var ball = 3+4;
document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function () {
var ball = 3 + 4;
var div = document.getElementsByTagName("div")[0];
div.innerHTML = ball;
};
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
onload is executed when the page is fully loaded, so the DIV is ready to be manipulated. getElementsByTagName("div") returns a list of all DIVs in the page, and we get the first one ([0]) since there is only one DIV in your code.
Finally, I guess innerHTML doesn't require any explanation :-)

How to add javascript file in <head> in this condition?

Only if form action is /?cms_mode=edit
<body id="home">
<form method="post" action="/?cms_mode=edit" id="main">
</form>
</body>
then a js file edit.js should be added into head, otherwise not.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="edit.js"></script>
</head>
Is it possible through jquery/javascript?
And edit.js flie should be added after all other .js file
If you have to do it on the client-side in JavaScript, you may want to try the following:
var newScript;
if (document.getElementById('main').action.indexOf('?cms_mode=edit') >= 0) {
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'edit.js';
document.getElementsByTagName("head")[0].appendChild(newScript);
}

Retrieving the text of a specified link tag not working

so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>

Categories

Resources