How do I transfer a value between webpages using local storage? - javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button id="submitbutton">Submit</button>
</form>
<script>
document.getElementById("submitbutton").addEventListener("click", setItem);
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>
I'm trying to transfer "jobreference1" from the 1st snippet to the 2nd using local storage. As you can see, I've stored it in one external JavaScript file and sent it to another. But when I try to call it in the HTML code in the 2nd snippet, to which the value was transferred to, it simply doesn't work. I've decided to include all of my HTML and JavaScript code for my second snippet because I believe that's where the issue lies. Thank you.
Note: no Inline JavaScript or jQuery.

This is a working example. The index.html sets the reference on page load. The form submit redirects to apply.html and it reads the correct value at page load.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button>Submit</button>
</form>
<script>
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>
apply.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Job Reference Number: <span id="job1"></span></p>
<script>
document.getElementById("job1").innerHTML = localStorage.getItem("jobreference1");
</script>
</body>
</html>

Related

my code is working on codepen but not in my browser. i wanted to getelementbyid and then then that element on console

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Assignment 4</title>
<script src="script.js"></script>
</head>
<body>
<h1>Biryani</h1>
<h2 id="hello">Rohan</h2>
<p>Biryani is Pakistan's special dish. Main Ingredients are rice and chicken.</p>
</body>
</html>
script.js
<-- this script is used to getelementbyid "hello" and then displaying on console.-->
var myname = document.getElementById("hello");
console.log(myname.innerHTML);
const el = document.querySelector('h2');
el.textContent = 'Assignment 4';
The code is correct. You just need to move your script tag just before you close the body tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Assignment 4</title>
</head>
<body>
<h1>Biryani</h1>
<h2 id="hello">Rohan</h2>
<p>
Biryani is Pakistan's special dish. Main Ingredients are rice and chicken.
</p>
<script src="./script.js"></script>
</body>
</html>
You should include js below of your element definitions.
Browser is compiling html scripts from top to below. If you included js code before all elements defined then that catch nothing and it returns error.
...
// your elements are defined here.
<script src="script.js"></script>
</body>

Javascript buttons and alerts not functioning properly. Alerts appear when page is refreshed but my buttons are not appearing

I am currently working on the beginning stages of js and trying to create buttons and alerts with it. when i write my code, the alerts work but my buttons are not appearing. when i inspect my webpage, the buttons dont even appear in the code. any suggestions on what i can do to fix this?
alertmessage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<script type="text/javascript" src="js/code.js">
</script>
</body>
</html>
code.js
window.alert("Welcome to Javascript");
buttons.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button 2">Click me.</button>
<script>
document.getElementbyId("button 2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>
</html>
well at first try not to use spaces when you create your buttons ids e.g (id="button 2")
instead use id="button2"
I modified your code adding the event listener on document ready find the below code hope that is what you are looking for, it should get your started.
Note: for posting here when you write your message paste your code under your message text and select the code then Press ctrl+K that should identify your code area then post it and all should work fine...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button2">Click me.</button>
<script>
$(document).ready(()=>{
document.getElementById("button2").addEventListener("click", function(){
alert("You have just clicked me!");
});
})
</script>
</body>
</html>

XSS injection and innerhtml

I am trying to learn about XSS vulnerabilities and am having some issue grasping the concept. I have a test site http://mytestpage/index.html and am trying to launch an alert box via xss from a secondary page http://xsstest.html. I can not seem to get the alert to occur. I think my issue is that the code from my xsstest page is not injecting into my mytestpage/index.html page. I am trying to use innerhtml as the posts I read seemed to leverage this in XSS testing. I am fairly certain that I am not using the innerhtml correctly or pehaps it is not the right "tool for the job" and i am running down the wrong path. Any suggestions would be appreciated.
My code for the XSS test is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>XSS TEST PAGE</title>
</head>
<body>
<body onload="document.forms[0].submit()">
<form method="POST" id="test" onsubmit="test()" action="http://mytestpage/index.html" >
</form>
</body>
<script>
function test(){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
</html>
The test homepage code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
</html>
This right here is no bueno:
<script>
function test( ){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
document.getElementById() requires you pass it the ID of an element. So, for example, if there's a div on the page with the ID of #alert, you'd do document.getElementById('alert').
You also can't assign a function to the inner HTML of an element. You need to create a script element and then append it to the document or another element. Instead, try:
<script>
let myTest = document.createElement('script')
myTest.text = `
function test() {
alert('Hiya buddy!')
};
test();
`
const body = document.querySelector('body')
body.appendChild(myTest)
</script>
You are not doing XSS. You are simply displaying alert upon form submission. That too has error that document.getElementById() requires a id to select the element.
XSS is done where you have some input to enter. SO you cannot do XSS in XSStest page but you can do it from test home page code by changing it as
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post" action="some page url">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
And Suppose the page whose url you have given in action attribute is like
<!DOCTYPE html>
<HTML>
<body>
Name is: <%=request.getParameter("myname")%>
</body>
</HTML>
I have assumed you are using jsp here.
Now when you enter XSS payload in inputbox in this page and submit it the page whose url you have given will open up and display the alert as you have not sanitized the input value before using it in second page.

Website href links not working, how to fix it?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</html>
I have been trying to figure out why my href links are not working no matter what i do. The pages i am trying to connect them to are named like in the code so i am highly confused.
You're missing a body tag and then closing tags .. browsers will behave badly ;)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</body>
</html>
Please check like Home.html and other Html page that you are using for href are located at same folder where your main Html page is located.
I have created a sample.html page from above code and replaced Home.html page with my page
it is working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</html>
I have used chrome for it.I have put all the Html page like this webapp/app/view/sample.html and others also are available at view/
<html>
<body>
<a href="mailto:cscreamery#gmail.com"></i>Email us at
cscreamery#gmail.com</a>
or
<a href="tel:(719)-555-0987"></i>call us at
(719)-555-0987</a>
</body>
</html>

jQuery iframe selector workings in dev tool but not in the page

Can someone tell me why the following line works from the dev tool console but does not work in the page, I keep getting length as 0
$("iframe[name='gridFrame']").contents().find("form[name='grid']").length;
This is the page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="/Scripts/jquery-3.1.1.js"></script>
<script>
$(function () {
submitThis();
function submitThis() {
var a = $("iframe[name='gridFrame']").contents().find("form[name='grid']").length;
console.log(a);
}
})
</script>
</head>
<body>
<iframe name="gridFrame" src="temp-iframe-test.html">
</iframe>
</body>
</html>
And this is the iframe file:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="grid">
<input id="fname" />
</form>
</body>
</html>
your submitThis() function is firing before your iframe has loaded its source. That is why you see a length of 0.
Try adding:
onload="submitThis()" to your iframe element and moving your submitThis function into global scope (out of the $ function).
When using the dev console, your iframe has since loaded its file.

Categories