Cant get content of iframe in javascript function - javascript

Actually what i want,when submit the from that request go to this http://api.brightcove.com/services/post , i set target element of form to iframe.Then response is go to iframe correctly its ok.Problem is ,I want to get body content of iframe using javascript function but it is not working.This is my source
<html>
<head>
<script>
function getIframe(){
var iframe = document.getElementById('postFrame');
var bodyC = iframe.contentDocument.body.innerHTML;
alert(bodyC);
}
</script>
</head >
<body >
<form action="http://api.brightcove.com/services/post" method="post" target='postFrame'>
<input type="hidden" name='JSON' value="test"/>
<button type="submit" >Submit</button>
<button onclick="getIframe()" type="button">Check Iframe Result</button>
</form>
<iframe id="postFrame" name="postFrame" style="width:100%;border:none" ></iframe>
</body>
</html>

Related

page not redirecting in javascript after clicking a button which is inside a form

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
}
</script>
</body>
</html>
if the button is placed without the form tag it is working properly. If it is placed inside the tags its not getting redirected when clicked on it.
Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
<form>
<button type="button" onclick="demo()" name="btn">Click Here</button>
<!-- or you can use input element -->
<input type="button" onclick="demo()" value="Click Here" />
</form>
<script>
function demo() {
window.location.href = "http://www.google.com"
}
</script>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="return demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
return false;
}
</script>
</body>
</html>
This modification prevent the default action of clicking on a button inside a form (which is submitting it) and relocate to google.
If you don't need the form do not use it.
It should be look like this.
<form>
<button onclick="demo(event)" name="btn">click here</button>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
</form>
or you can try this also
<form>
<button onclick="demo(event)" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>

Label for checkbox of an html frame

How can I do like for example, if we click over the label text, I want to toggle (check/uncheck) the checkbox of box.html page.
I've included the box.html page, with an iframe.
Index.html
<html>
<body>
<iframe src="box.html" height="25px" width="100px">
</iframe>
<label for="box">
checkbox
</label>
</body>
</html>
Box.html:
<html>
<body>
<input type="checkbox" id="box">
</body>
</html>
First thing, both the pages (Main and iframe) should be from the same domain, else it will throw cross domain error.
1st Page
<html><head>
<script>
function delegate() {
var iframe = document.getElementById("myIframe");
iframe.contentWindow.change();
}
</script></head><body>
<iframe id="myIframe" src="box.html" height="25px" width="100px"></iframe>
<label for="box" onclick="delegate()">
Click Here.
</label></body></html>
2nd Page
<html><head>
<script>
function change() {
document.getElementById('box').checked = !document.getElementById('box').checked;
}
</script></head><body>
<input type="checkbox" id="box"></body></html>

Javascript not working at all

I'm new to Javascript and can't figure out why no script is working in either Firefox or IE. I'm working with Notepad++ and after my external .js file didn't work I made a simple script that isn't working either:
This is the end of my html.
<div id="form1">
<form>
<textarea name="boxtext" id="textarea1" rows="10" colums="30">
maximum 300 characters
</textarea>
<button type="button" id="submit1" onclick="myFunction()">submit this</button>
</form>
</div>
<div id="forTheBoxes"></div>
<div id="footer">Copyright Jesper Hodge</div>
<script>myFunction() {window.alert("ok!")}</script>
</body>
</html>
Make this changes:
function myFunction() {
window.alert("ok!");
}
Or
var myFunction=function () {
window.alert("ok!");
}
2 things I see. The word function is missing where you declare your function.
<script>function myFunction() {window.alert("ok!")}</script>
And your script it in a bad place. Try putting it in <head> area.
This should be work:
1) Declare function myFunction
2) Insert your external js file in your html header
3) Handle event onclick button in html
function myFunction() {
alert("ok!");
}
<html>
<head>
<script type="javascript/text" src="/yourJsSourceFile"></script>
</head>
<body>
<div id="form1">
<form>
<textarea name="boxtext" id="textarea1" rows="10" colums="30">
maximum 300 characters
</textarea>
<button type="button" id="submit1" onclick="myFunction()">submit this</button>
</form>
</div>
<div id="forTheBoxes"></div>
<div id="footer">Copyright Jesper Hodge</div>
</body>
</html>

javascript galary-the picture can't show

Here is my code, how can I show the image? When I run the web page, it only shows the two buttons but no image...Should I call the function inside my html?
<html>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array()
var which=0
photos[0]='images/title.gif'
photos[1]='images/pinkrice.png'
function backward(){
if (which > 0){
which=which-1
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which=which+1
document.images.photoslider.src=photos[which]
}
}
</script>
<head><title>How to Play?</title></head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>
I Edited your code. Test this. Now are working. You need a container to show your image. document.images only store your images on cache. you need a tag to show. Download files here
<html>
<head>
<title>How to Play?</title>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array();
var which=0;
photos[0]='images/title.gif';
photos[1]='images/pinkrice.png';
function backward(){
if (which > 0){
which=which-1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
function forward(){
if (which<photos.length-1){
which=which+1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
</script>
</head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<img id="SliderPhoto" src="images/title.gif" />
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>

Changing element text isn't working

It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>

Categories