I'm trying to pass an input value from page to the another page..
Using local storage was useful, but when I'm trying to change the value in the second page it doesn't changed, I want to be able to change it..
html code for the first page
<html>
<head>
<title>
Input Form
</title>
<link rel="stylesheet" href="style.css" />
<script>
function handleSubmit () {
const name = document.getElementById('name').value;
const surname = document.getElementById('surname').value;
localStorage.setItem("NAME", name);
localStorage.setItem("SURNAME", surname);
return;
}
</script>
</head>
<body>
<form action="result.html" method="POST">
<input type="text" id="name" name="name" placeholder="Enter name.." />
<input type="text" id="surname" name="surname" placeholder="Enter surname.." />
<input type="submit" onclick="handleSubmit()"/>
</form>
</body>
</html>
html code for second page
<html>
<head>
<title>
Result Page
</title>
<link rel="stylesheet" href="style.css" />
<script>
window.addEventListener('load', () => {
const name = sessionStorage.getItem('NAME');
const surname = sessionStorage.getItem('SURNAME');
document.getElementById('result-name').value = name;
document.getElementById('result-surname').value = surname;
})
</script>
</head>
<body>
<h1>
Result Page
</h1>
<h2>
Name: <input id="result-name" />
</h2>
<h2>
Surname: <input id="result-surname" />
</h2>
</body>
</html>
You are using local storage to set the item. You need to use local storage to get the item. Not session storage.
I am talking about these lines here:
const name = sessionStorage.getItem('NAME');
const surname = sessionStorage.getItem('SURNAME');
I changed it for you. Just copy paste the whole page and you are good to go.
<html>
<head>
<title>
Result Page
</title>
<link rel="stylesheet" href="style.css" />
<script>
window.addEventListener('load', () => {
const name = localStorage.getItem('NAME');
const surname = localStorage.getItem('SURNAME');
document.getElementById('result-name').value = name;
document.getElementById('result-surname').value = surname;
})
</script>
</head>
<body>
<h1>
Result Page
</h1>
<h2>
Name: <input id="result-name" />
</h2>
<h2>
Surname: <input id="result-surname" />
</h2>
</body>
</html>
Read on local storage vs session storage. They are bit different.
Related
im working on a website with 2 pages 1 is the receiver and 2 is the remote basicly you can enter a text on page 2 and once you hit submit page1 starts playing a text to speatch message with the text inut from page2
index.html (aka : page1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1 id="header"></h1>
<script src="src/script.js"></script>
</body>
</html>
control.html (aka : page2)
<body>
<center>
<form>
<h1 style="color:green">Javatpoint</h1>
<h3> Confirm password Validation Example </h3>
<!-- Enter Password -->
<td> Enter Password </td>
<input type = "password" name = "pswd1"> <br><br>
<button type = "submit" onclick="matchPassword()">Submit</button>
<script>
var pw1 = document.getElementById("pswd1");
function matchPassword() {
<script src="script.js"><script> var x1
}
</script>
script.js of page1
const message = 'Hello world' // Try edit me
// Update header text
document.querySelector('#header').innerHTML = message
// Log to console
console.log(message)
var audio = new Audio('notif.mp3');
audio.play();
var msg = new SpeechSynthesisUtterance();
msg.text = "hallo jeremy";
window.speechSynthesis.speak(msg);
i cant find a way to send the text inside page2 to page 1
There are many ways that you could achieve this, but I'll show you just one. You can easily pass data between pages using query parameters, which are essentially pieces of data appended to the end of a URL.
In order to utilize these, you would need to redirect to your index.html page whenever the user presses the button in the control.html page. Fortunately, this can be done by adding an event listener to your Submit button.
Here is the code below:
control.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<form>
<p>Enter stuff here:</p>
<input type="text" id="text-input" name="text" />
<input type="submit" id="submit-button"></input>
</form>
<!-- continue document... -->
<script src="src/control.js"></script>
</body>
</html>
src/script.js
const queryString = window.location.search;
const queryParams = new URLSearchParams(queryString);
const message = queryParams.get("text");
console.log(message);
// continue file...
src/control.js
const button = document.getElementById("submit-button");
button.addEventListener("click", handleText);
function handleText(event) {
event.preventDefault();
const text = document.getElementById("text-input").value;
const currentURL = window.location.pathname;
const currentDir = currentURL.substring(0, currentURL.lastIndexOf("/"));
window.location.replace(currentDir + "/index.html?text=" + text);
}
Hope this helps!
i want to make my local static html website password protected with some js, so that when i open my local html file in my pc, it comes with a form to fill up my user id and my own password, which i have saved and when i hit enter that should open my index.html file only when password is correct.
currently my code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Form>
<!-- user-id -->
<input type="text">
<!-- user-password -->
<input type="password">
<button onclick="window.open('./index.html')"> Enter
</button>
</Form>
<script>
// pls-help-me-idk-how-to-code-js
</script>
</body>
</html> ``
Its not a proper way to do it. You need a backend for that inorder to properly execute that. But if it just to play around you can have an alert box and just compare their value : if right it displays.
First, you have to add an id or a class to that inputs in order to select them within the script section. Afterward, you can select them and add any value you want.
Such as:
<form>
<!-- user-id -->
<input id="user" type="text" />
<!-- user-password -->
<input id="pass" type="password" />
<button onclick="window.open('./index.html')">Enter</button>
</form>
<script>
document.getElementById("user").value = "UsernameOrId";
document.getElementById("pass").value = "SomePassword";
</script>
In order to compare, you should get the right password from somewhere like a database or some service, but since this is purely for learning purposes you can hardcode it in the script for checking. So, the final solution can be similar to this:
<body>
<form>
<!-- user-id -->
<input id="user" type="text" />
<!-- user-password -->
<input id="pass" type="password" />
<button id="btn">Enter</button>
</form>
<script>
const myPass = "SomePassword";
document.getElementById("user").value = "UsernameOrId"; // predefining the value simulating is saved and by default filled up
document.getElementById("pass").value = myPass; // predefining the value simulating is saved and by default filled up
const btn = document.getElementById("btn"); // getting the button to control its behavior on click event
btn.addEventListener("click", function () {
const passWhenClickingTheBtn = document.getElementById("pass").value;
if (myPass === passWhenClickingTheBtn) { // checking the value entered for pass
window.open("./index.html");
}
});
</script>
This is my first page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<h1>Customer Form</h1>
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="myFunction()">Submit</button>
</form>
<!-- JavaScript -->
<script type="text/javascript" src="./javascript.js"></script>
</body>
</html>
This is my second page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<p id="1"></p>
<!-- JavaScript -->
</body>
</html>
MY JAVASCRIPT
function myFunction() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
name = document.getElementById('name').value;
address = document.getElementById('address').value;
document.getElementById("1").innerHTML="<h1>alola="+name+"</h1>";
document.getElementById("2").innerHTML=address;
}
xhttp.open("GET", name);
xhttp.send();
}
I would like to display my name when typing my name from first page in the customer name label, and when i click submit. my second page display my name in the "id=1".
Ajax and ajax like techniques (fetch etc.) are usually used to either post data to a form or to get data from a url.
To send data from one HTML page to another you would need some kind of database and server side code to capture and store it and later retrive it.
If you just want inputed client side data to persist across pages then look at sessionStorage or localStorage, for example to keep the name we type until we exit the browser or clear session data:
First page:
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="">Submit</button>
</form>
<script>
const name=document.getElementById('name')
name.addEventListener("keyup", (e) => {
sessionStorage.setItem('uname', name.value);
});
</script>
Second page:
<body>
<p id="usersName"></p>
<script>
let userNameElm = document.getElementById('usersName');
userNameElm.innerText = sessionStorage.getItem('uname');
</script>
</body>
Just remember to be careful what you store, and that it's only stored on the frontend/client side.
I have one simple html page with a text field that asks for user's name. i want to save what user enter and on another page i want to retrieve that name and say hello + (user's name).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
</head>
<body>
<form>
<p>Enter your name</p>
<input type="text">
<button type="submit" value="submit">Submit</button>
</form>
</body>
</html>
and the second page is where the data from first page comes (through localStorage).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>secondPage</title>
</head>
<body>
<h1>Hello </h1>
</body>
</html>
thank you.
I'm not sure if this is a homework assignment but this should get you started.
It will involve:
First storing the data into localStorage
Then directing the user over to the second page - most likely through window.location.href.
Then pulling the data back out of localStorage to display there.
Here's a jsfiddle to get you started setting and getting data.
https://jsfiddle.net/em92zbod/
The two main functions are:
window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");
Where "key" is any identifier you want to use for the value.
Here's a suggested approach by using sessionStorage.
However, you can also use localStorage with the same implementation method. The only differences between them is localStorage will keep the data even if you close your browser. Which in this case, saving userName I think it's better to use sessionStorage.
1.html
<form action="2.html" onsubmit="callme()">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit" value="submit">Submit</button>
</form>
<script>
function callme(){
var name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
}
</script>
2.html
<h1 id="welcome"> </h1>
<script>
window.onload = function() {
document.getElementById('welcome').innerText = "Hello, " + sessionStorage.getItem('userName');
};
</script>
Code update
page 1
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("myForm").addEventListener("submit", e => {
const form = e.target;
const name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
})
})
<form action="2.html" id="myForm">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit">Submit</button>
</form>
Page 2
window.addEventListener("DOMContentLoaded", () => {
document.getElementById('welcome').textContent = `Welcome ${ sessionStorage.getItem('userName') || "stranger"}`;
})
<h1 id="welcome"></h1>
I am working on forwarding data from the current page to the same next page i.e. whenever the page is loaded again, the code checks if there is any such storage, if it is then it loads the values in text box. I am not able to get it to work Below is the code -
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function values()
{
if(localStorage.getItem(pranav))
{
document.getElementById(FName).innerText= sessionStorage.getItem(pranav);
document.getElementById(OName).innerText= sessionStorage.getItem(k);
}
else
{
sessionStorage.setItem("pranav", "P");
sessionStorage.setItem("k", "P");
return;
}
}
</script>
</head>
<body>
<form name="myform" action="Idea.html" onload="values(this.form)">
<label>Please Enter Your Full Name = </label><input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label><input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" onclick="values(this.form)" />
</form>
</body>
</html>
Kindly help me as to why this is not working?
You haven't declared the pranav and k variables you used. Also when you are assigning a value to an input field you should use the .value property instead of .innerText.
Also you might consider splitting your code in 2 functions:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function loadValues() {
var data = localStorage.getItem('data');
if(data) {
data = JSON.parse(data);
document.getElementById('FName').value = data.firstName;
document.getElementById('OName').value = data.lastName;
}
}
function saveValues() {
var data = {
firstName: document.getElementById('FName').value,
lastName: document.getElementById('OName').value
};
localStorage.setItem('data', JSON.stringify(data));
}
</script>
</head>
<body onload="loadValues()">
<form name="myform" action="Idea.html" onsubmit="saveValues()">
<label>Please Enter Your Full Name = </label>
<input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label>
<input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" />
</form>
</body>
</html>