I am trying to pass some data from parent window to pop up window in html.
Below is my code-
<html>
<head>
<script type="text/javascript">
function init()
{
popupWin = window.open('','popupWin','');
popupWin.document.writeln('<html><head><title>test</title></head><body><form><input type="text" id="popupTextBox"/></form></body></html>');
popupWin.document.close();
popupText = popupWin.document.getElementById("popupTextBox");
parentText = document.getElementById("parentTextBox");
}
function transferText()
{
popupText.value = parentText.value
}
</script>
</head>
<body>
<input type="text" id="parentTextBox"/>
<input type="button" onclick="init();"/>
</body>
</html>
But somehow I am not able to pass that textbox data to popup window with the above code. Is there any problem with this?
In general, I am trying to pass some data from parent window to popup window.
You forgot to call transferText()
After calling transferText() the text was transferred...
<html>
<head>
<script type="text/javascript">
function init()
{
popupWin = window.open('','popupWin','');
popupWin.document.writeln('<html><head><title>test</title></head><body><form><input type="text" id="popupTextBox"/></form></body></html>');
popupWin.document.close();
popupText = popupWin.document.getElementById("popupTextBox");
parentText = document.getElementById("parentTextBox");
transferText();
}
function transferText()
{
popupText.value = parentText.value
}
</script>
</head>
<body>
<input type="text" id="parentTextBox"/>
<input type="button" onclick="init();"/>
</body>
</html>
Related
This is the method which I tried. I've added a feedback just to test out if the JavaScript variable siteName contains the value from the HTML textbox value but it reflected "[object HTMLInputElement]" instead. Any idea why?
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName = document.getElementById('firstid');
function myFunction() {
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
You have to use the value property to get the actual text from the input. Otherwise it will return the reference of the input text field. The reference is type of HTMLInputElement which has a value property holding actual data entered in the text field.
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName;
function myFunction() {
siteName = document.getElementById('firstid').value;
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Use the value of the input element to retrieve from value form it, or else you will be getting an object.
document.getElementById("2ndid").innerHTML = siteName.value;
This is a pretty simple fix, you just have to add the value property at the end of the second fucntion.
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName.value;
}
You are not initialising your variable.
here a working code.
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName;
function myFunction() {
siteName= document.getElementById('firstid').value;
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
Why does refButton get null in the following JavaScript code?
<html>
<head>
<title></title>
<script type="text/javascript">
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
alert('I am clicked!');
};
</script>
</head>
<body>
<form id="form1">
<div>
<input id="btnButton" type="button" value="Click me"/>
</div>
</form>
</body>
</html>
At the point you are calling your function, the rest of the page has not rendered and so the element is not in existence at that point. Try calling your function on window.onload maybe. Something like this:
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
alert('I am clicked!');
}
};
</script>
</head>
<body>
<form id="form1">
<div>
<input id="btnButton" type="button" value="Click me"/>
</div>
</form>
</body>
</html>
You need to put the JavaScript at the end of the body tag.
It doesn't find it because it's not in the DOM yet!
You can also wrap it in the onload event handler like this:
window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
alert( 'I am clicked!' );
}
}
Because when the script executes the browser has not yet parsed the <body>, so it does not know that there is an element with the specified id.
Try this instead:
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = (function () {
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
alert('Dhoor shala!');
};
});
</script>
</head>
<body>
<form id="form1">
<div>
<input id="btnButton" type="button" value="Click me"/>
</div>
</form>
</body>
</html>
Note that you may as well use addEventListener instead of window.onload = ... to make that function only execute after the whole document has been parsed.
To make a long story short, I need to be able to prevent the default action from a input type="file". In other words I do not want to display the system's open dialog box when the user clicks on the "Browse" or "Choose File". I already have the replacement dialog working, but the system's open dialog box still appears.
Below is a sample of what I am currently trying to accomplish this. (PS: I am using Chrome 21)
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
event.stopPropagation(); // Doesn't work
return false; // Neither does this
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick();" />
</body>
</html>
Any ideas?
How about
<input type="file" onclick="return false" />
or if you need the file_onclick function
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
return false;
};
//-->
</script>
</head>
<body>
<input type="file" onclick="return file_onclick();" />
</body>
</html>
Got it. I needed to disable the tag and then use the setTimeout method to re-enable it.
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function(o)
{
// Show custom dialog instead...
o.disabled = true;
setTimeout(function() { o.disabled = false; }, 1);
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick(this);" />
</body>
</html>
I am using an iFrame in my application. Let me give an example here.
I have main page as
<html>
<head>
<script src='jquery.js'></script>
<script>
function TestFunction()
{
var FirstName = $("#first_name").val();
alert(FirstName);
}
</script>
<head>
<body>
Enter First Name: <input type='text' size='20' id='first_name'><br />
<input type='button' value='Cilck' onclick='TestFunction();'><br />
<iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
</iframe>
</body>
</html>
...and this works fine with alerting whatever is entered in textbox
But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?
Suppose test_iframe.htm code is like this
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
TestFunction(); // I know this wont work.. just an example
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
Can this be done ?
I believe this can be done with 'parent'
function IframeFunction()
{
parent.TestFunction();
}
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
parent.TestFunction(); // or top.TestFunction()
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
<a onclick="parent.abc();" href="#" >Call Me </a>
See Window.Parent
Returns a reference to the parent of the current window or subframe.
If a window does not have a parent, its parent property is a reference to itself.
When a window is loaded in an , , or , its parent is the window with the element embedding the window.
This answer is taken from stackoverflow
I would like to make a button on a page that can call a JS function in the same page. The function will need to create (open) new window which its HTML code was given from the JS function itself. How can I do that?
The purpose of this is to produce a print friendly page out of a specific page.
Please notice: No AJAX can be used.
var opened = window.open("");
opened.document.write("<html><head><title>MyTitle</title></head><body>test</body></html>");
var w = window.open("");
w.document.writeln("<the html you wanted to write>")
function fu() {
var opened = window.open("");
opened.document.write("Your HTML here");
}
<textarea id="code" placeholder="Put code here!" width="500" height="500">
<DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html></textarea>
<input id="width" placeholder="width">
<input id = "height" placeholder="height">
<button onClick="open();">Open the window!</button>
<button onClick="write();">Apply the html to the window</button>
<button onClick = "resize();">Resize the window!</button>
<script>
var win;
function open(){
win = window.open("", "", "");
win.resizeTo(screen.width, screen.height);
}
function resize(){
win.resizeTo(eval(document.getElementById("width")), eval(document.getElementById("height")))
}
function write(){
win.document.write(document.getElementByid("code").value);
}
</script>
Here you can input things and change the window. Hope you enjoy! :)