I am working on a simple page that contains 2 iframes. Text is input into iframeA and once a button is clicked on iframeB I want it to display the text from iframeA but it just displays undefined. I feel like I am close but cannot seem to see what I am doing wrong. The code for both iframe pages is below.
--iframeA (ifr1.htm)
<html>
<head>
<script type="text/javascript">
var var_name = document.getElementById("textbox").value;
</script>
<body>
<input type="text" name"textbox" id="textbox"/>
</body>
</html>
--iframeB (ifr2.htm)
<html>
<body>
<script type="text/javascript">
function f2(txt){
var name2 = parent.ifr1.var_name;
document.getElementById('div2').innerHTML = name2;
}
</script>
<div id="div2"></div>
<button onclick="f2('complete')"></button>
</body>
</html>
parent.ifr1.var_name;
I would recommend parent.frames.ifr1.var_name
it just displays undefined:
var var_name = document.getElementById("textbox").value;</script>
</script>
…
<input type="text" name"textbox" id="textbox"/>
You're assigning the value of the input only once, when the document is loading (I doubt that it works at all actually). When you later type anything in, the value of var_name never changes.
Instead, you want to get the value when the button is clicked:
function f2(txt){
var name2 = parent.frames.ifr1.document.getElementById("textbox").value;
document.getElementById('div2').innerHTML = name2;
}
(and you can remove the script from ifr1.htm). Alternatively, use this for the first iframe:
<html>
<head>
<body>
<input type="text" name"textbox" id="textbox"/>
<script type="text/javascript">
var var_name;
document.getElementById("textbox").onchange = function(e) {
var_name = this.value;
};
</script>
</body>
</html>
Related
I have made a code in which on clicking computer Science button I get data from XML
<html>
<head>
<script src="loadxmldoc.js"></script>
</script>
</head>
<body>
<h1 style="text-align:center">DEPARTMENT DETAILS</h1>
<button onclick="myfunction()">Computer Science</button>
</br>
<script>
function myfunction(){
xmlDoc=loadXMLDoc("faculty.xml");
var x=xmlDoc.getElementsByTagName("computer")[0];
var y=x.childNodes;
for(i=0;i<y.length;i++)
document.write(y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>");
}
</script>
</body>
</html>
When I click on button I do get the data but a new page is loaded. I would like to have data below the button. How to do so?
document.write is archaic and useful only before the DOM has loaded. If it's used after that, it overwrites the current DOM, as you've discovered.
Use DOM methods instead and prepare a container to receive the content.
HTML:
<div id='container'></div>
JS:
var cntr = document.querySelector('#container'), html = '';
for (var i = 0; i < y.length; i++) {
html += y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>";
}
cntr.innerHTML = html;
Consider using this approach.
Basically load your xml data, and display the result in a div "result";
<html>
<head>
<script src="loadxmldoc.js"></script>
</script>
</head>
<body>
<h1 style="text-align:center">DEPARTMENT DETAILS</h1>
<button onclick="myfunction()">Computer Science</button>
</br>
<script>
function myfunction(){
xmlDoc=loadXMLDoc("faculty.xml");
var x=xmlDoc.getElementsByTagName("computer")[0];
var y=x.childNodes;
var result = document.getElementById('result');
for(i=0;i<y.length;i++)
result.innerHTML = ''; // always reset
result.innerHTML +='y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>"';
//document.write(y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>");
}
</script>
<div id="result"></div>
</body>
</html>
Lets assume that I have an input box on a page. I click a button and whatever is in the input, is transferred to another page and retrieved using JavaScript.
Page1 = C:\Documents\page1.html
Page1 code:
<!DOCTYPE html>
<html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
contents = document.getElemeentById("user_input").value;
//code to go to page 2;
}
</script>
</body>
</html>
Page2 = C:\Documents\page2.html
Page2 code:
<DOCTYPE html>
<html>
<body>
<h1 id="my_title">empty</h1>
<script>
//on load execute this {
//retrive contents from page1 and save as contents
//document.getElementById("my_title").innerHTML(contents);
//}
</script>
</body>
</html>
*Note that the input will contain spaces (if that's any help). All useful answers will be voted up.
You could just use localStorage
page1
<!DOCTYPE html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
var contents = document.getElementById("user_input").value;
localStorage.setItem('user', contents);
window.location.href = 'page2.html';
}
</script>
</body>
</html>
page2
<DOCTYPE html>
<body>
<h1 id="my_title">empty</h1>
<script>
var full_name = localStorage.getItem('user');
document.getElementById("my_title").innerHTML = full_name;
</script>
</body>
</html>
This only works if you use an actual webserver to test your pages, and there's a polyfill for older browsers on MDN
first.html
<!DOCTYPE html>
<html>
</head>
<body>
<form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
</form>
</body>
</html>
other.js
function validateUsernamePassword()
{
var idNum = $("#userId").val();
alert('Well the id is :' + idNum);
// more code
}
The alert doesn't print the passed ID ... why ?
Modify your html like this:
<html>
<head>
<title></title>
</head>
<body>
<form>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
<input type="hidden" id="userId"></input>
</form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
</body>
</html>
Or you could do just this:
function validateUsernamePassword()
{
var idNum = localStorage.getItem("idNumber");
alert('Well the id is :' + idNum);
// more code
}
The second one is good since you already have the item in localstorage, so ther is no need of assign its value to another element
this trick may help you:
<html>
<head>
</head>
<body>
<dl>
<script>
window.var1 = "hello, world";
</script>
<input type="button" value="click" onclick="clicked()">
<script>
function clicked(){
alert(window.var1);
};
</script>
</body>
<body>
<script type="text/javascript">
var a="sreedhar";
<input type="text" value="abc">
</script>
</body>
It gives the syntax error.
can't we use "html tags" directly in "javascript".
No, you can't use them directly in JavaScript.
However you may treat them as strings:
var str = '<input type="text" value="abc">';
or as DOM elements:
var input = document.createElement('input');
input.type = 'text';
input.value = 'abc';
And then append to the markup, e.g. document.body.appendChild(input);.
Usually a well formated hmtl with javascript looks like this.
<HTML>
<HEAD>
<script type="text/javascript">
var a="sreedhar";
</script>
</HEAD>
<BODY>
<input type="text" value="abc">
</BODY>
</HTML>
If you want to generate some html with javascript then assign it as a string to some variable.
For example you have a div having id='abc' and you want to generate a textbox in this div then you need to do like this
<script type="text/javascript">
var textbox = '<input type="text" value="abc">';
$('#abc').append(textbox);
</script>
Maybe you want this:
<script type="text/javascript">
var a="sreedhar";
document.write('<input type="text" value="abc">');
</script>
</BODY>
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
//put javascript function here
</script>
</head>
<body>
<input type="text" value="abc">
</body>
</html>
You can use html element inside the javascript using element id.
When I use this code the console.log and the value in the field disappear right away.
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
How can I prevent that from happening. Or what am I doing wrong?
The final goal will be to append the result of a calculation by the value of the field into another field.
edit:
<html>
<head>
<script src="bereken.js"></script>
</head>
<body>
<form id="berekenForm">
Bereken: <input type="text" name="bereken" id="bereken"/><br />
<input type="submit" value="Bereken" id="berekenKnop"/>
</form>
</body>
</html>
The submit button is doing its default task. i.e. submitting the form. Try handling that.
Value in the field 'bereken' not disappearing.See the code below. If this is not the expected answer, please, Update the question with question in details:
<html>
<head>
<script type="text/javascript">
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
</script>
</head>
<body>
<div id="berekenKnop">
Click Here to console value
</div><br/>
<input type="text" value=" bereken value" id="bereken" />
</body>
</html>