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
Related
I was trying to use the example from here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/forms
for my own uses.
The above example is accessing a form on the same page. My example attempts to populate a field on a different page.
Here is the launcher html - launcher.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Launcher page</title>
<script>
function launch(text) {
window.open("http://localhost/page2.html", '_blank');
let entryform = window.document.forms.newentry;
entryform.elements.town.placeholder = text;
window.focus();
}
</script>
</head>
<body>
<p>Click button to launch page2 and populate edit box on form</p>
<button type="button" id="launcher" onclick="launch('Edinburgh')">populate a text field on a different page</button>
</body>
</html>
And the launched page - page2.html:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<header>
<h1>This page launched from launcher.html</h1>
</header>
<main>
<form name="newentry">
<p>Town: </p><input type="text" name="town" value="">
</form>
</main>
</body>
</html>
But when I click the button on launcher.html I get an error on the launcher.html page:
entryform.elements.town.placeholder = text;
Uncaught TypeError: Cannot read property 'elements' of undefined
at launch (launcher.html:10)
at HTMLButtonElement.onclick (launcher.html:20)
Why is this elements property undefined?
How can I fix this?
EDIT
What I really wanted to do was simple, but the window.open object returned was not ready at the point I was attempting to edit. The really simple solution is like this:
function launch(text) {
let p2win = window.open('page2.html', '_blank');
p2win.onload = function(){
p2win.document.forms.newentry.town.value = text;
}
}
Your problem is that this code...
let entryform = window.document.forms.newentry;
is looking in the current window (ie launcher.html) for the form element. What you can do instead is save a reference to the popup window and access its elements via that reference.
let popup = window.open("http://localhost/page2.html", '_blank')
let entryform = popoup.document.forms.newentry
// and so on
As an alternative, I would consider passing a query parameter to the popup page instead of trying to manipulate it externally.
For example
window.open(`page2.html?placeholder=${encodeURIComponent(text)}`, '_blank')
and then in page2.html...
<main>
<form name="newentry">
<p>Town: </p><input type="text" name="town" value="">
</form>
</main>
<script>
let query = new URLSearchParams(location.search)
document.querySelector('form[name="newentry"] input[name="town"]')
.placeholder = query.get('placeholder')
</script>
Live demo ~ https://codesandbox.io/s/determined-archimedes-51vn2
So, my goal was to have it so that when the main button was clicked it would automatically redirect to a certain page in a new tab by doing something along the lines of
document.getElementById('mybutton').onclick = function() {
addselect("List of gems", "gemstones.org")
addselect("Whatever", "A url"
}
So that it would be very simple to make the tags be created, and then have the program redirect depending on what its InnerHTML was.
But so far I only have:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">Misc Info</h1>
<p>Select a website to go to.</p>
<select id="searches">
</select>
<br>
<br>
<button tyoe="button" id="submit">Go to list</button>
<script>
function addWebsite(name, url) {
var select = document.getElementById('searches');
var text = document.createTextNode(name);
var option = document.createElement("OPTION")
option.appendChild(text);
select.appendChild(option);
}
</script>
</body>
</html>
Now I am stuck and clueless, any suggestions
have you try to combine 2 onclick function () ??
<button onclick="function1(); function2()">
I have java/Flask (any other technology I don't know exists yet :)) question.
Suppose I have two sites: index1.html and index2.html
index1.html:
<!DOCTYPE html>
<html>
<body>
<p>This example "trigger" action on another site "onclick".</p>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
function myFunction() {
//send info/request/get to localhost/index2.html for example get using XMLHttpRequest;
}
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<script>
window.onload= function (){ //Wait for some request from index1.html than do something for example change string in demo}
</script>
<body>
<p id="demo">To change</p>
</body>
</html>
It can be done partially with Flask but every time i trigger from index1.html index2.html I have to refresh manually index2.html.
Maybe there is another technology which help me to do that
You can use localStorage storage event or SharedWorker to communicate between browsing contexts.
index1.html
<!DOCTYPE html>
<html>
<body>
page2
<p>This example "trigger" action on another site "onclick".</p>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
localStorage.clear(); // clear `localStorage`
function myFunction() {
localStorage.setItem("page1", "value");
}
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<script>
window.onload = function() {
if (localStorage.getItem("page1") != null) {
document.getElementById("demo").textContent = localStorage.getItem("page1");
}
// do stuff at `storage` event
onstorage = e => {
if (e.key === "page1") {
document.getElementById("demo").textContent = e.newValue;
}
}
}
</script>
<body>
<p id="demo">To change</p>
</body>
</html>
plnkr http://plnkr.co/edit/4Xz58S5MDidORm4CAPco?p=preview
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>
I'm working on a webpage that will consist of a large main frame, with a small frame across the bottom with a text box and submit button. I need the submit button to change the main frame to the url in the text box. My code is below, but it only works if the url ends in a file name (e.g., index.htm). It won't work if the url ends in .com or /folder/ where index.htm is assumed. How can I fix it?
Here is my html/javascript. In my index.htm I have:
<html>
<head>
<title>Menu Bar</title>
</head>
<frameset rows="*,30">
<frame src="main.html" name="main" id="main">
<frame src="menu.html" name="menu" id="menu">
</frameset>
<body>
</body>
</html>
The main.html is basically a blank html document (it has basic html, head, and body formatting only).
Here is menu.html:
<html>
<head>
<script language="JavaScript">
function go(){
URL = document.myForm.theURL.value;
parent.main.location=URL;
}
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="theURL" size="50">
<input type="button" value="Go" onClick="go()">
</form>
</body>
</html>
I'm not sure why this happens, but you can use this workaround:
function go(){
var URL = document.getElementById('myForm').theURL.value;
if (URL) {
url = URL.split('/');
if (url[url.length - 1].indexOf('index.htm') < 0) {
url[url.length] = 'index.htm';
URL = url.join('/');
}
} else {return;}
parent.main.location.href = URL;
// or: parent.main.contentWindow.location.href = URL;
}
To use this, you need to set id="myForm" to form element.