Local Storage not working? - javascript

I have a test with several webpages where by clicking through them, it saves your last URL,
their is a second button that, when clicked, it takes you too the variable that URL variable stored on local storage.
<head></head>
<script type="text/jscript">
function pagestore() {
localStorage.setItem('page','uronpg1.html');
}
function pagego() {
var spage = localStorage.getItem('page');
window.location = spage;
}
</script>
<body> <div id="forward" onclick="pagestore()">GO TOP PAGE2></div>
<div id="goto" onlick="pagego()">GOTO SAVED</div>
</body>
</html>
This page links to the uronpg2.html
<script type="text/jscript">
function pagestore() {
localStorage.setItem('page','uronpg2.html');
}
function pagego() {
var spage = localStorage.getItem('page');
window.location = spage;
}
</script>
<body> <div id="forward" onclick="pagestore()">GO TOP PAGE3></div>
<div id="goto" onlick="pagego()">GOTO SAVED</div>
</body>
Which keeps linking until its on uronpg5.html then comes back to uronpg1.html.
But for some reason the PAGEGO CLICK DOES NOT WORK, im not even fully sure why. I think it has to do with local storage.
If you have any advice i'd be great. Thanks.

You have a typo in your div with an id of goto.
The attribute onlick should be onclick.

Related

Set to true state a checkbox in a different page(javascript)

Here's the Script.
javascript
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
$('#website-design').attr('checked',true);
window.location.href = "/contact";
}
}
}
I want to check my checkboxes when I click the button with an id=website-design-check.
Here is my HTML.
first.html
<a href="/contact" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
Here's the second HTML file where checkbox is.
second.html
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
Now how can I achieve what I want base on the description given above. Can anyone help me out guys please. I'm stuck here for an hour. I can't get any reference about getting a checkbox state from another page.
To do this, you can modify your button link and add in additional parameters that you can then process on the next page.
The code for the different pages would be like:
Edit: I changed it to jQuery, it should work now.
Script
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
window.location.href = "second.html?chk=1";
}
}
second page
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script type="text/javascript">
var url = window.location.href.split("?");
if(url[1].toLowerCase().includes("chk=1")){
$('#website-design').attr('checked',true);
}
</script>
since your checkbox is in another html page, so it's totally normal that you can't get access to it from your first html page!
what I can offer u is using the localstorage to keep the id and then use it in your second page to check if it's the ID that u want or not.
so change your function to this :
function linkPageContact(clicked_id){
localStorage.setItem("chkId", "clicked_id");
window.location.href = "/contact";
}
then in your second page in page load event do this :
$(document).ready(function() {
var chkid = localStorage.getItem("chkId");
if(chkid === 'website-design-check'){
$('#website-design').attr('checked',true);
});
You can't handle to other sites via JavaScript or jQuery directly. But there's another way. You can use the GET method to achive this.
First you need to add to the link an attribute like this in your first.html:
/contact?checkbox=true
You can change the link as you want with JavaScript.
Now it will refer to the same page but it can be now different. After that you can receive the parameter with this function on the second.html.
function findGetParameter(parameterName) {
var result = null,
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
}
return result;
}
I got it from this post thanks to Bakudan.
EDIT:
So here is an short theory.
When the user clicks the button on the first page, then you change the link from /contact to /contact?checkbox=true. When the user get forwarded to second.html then you change the checkbox depending on the value, which you got from the function findGetParameter('checkbox').
As all have mentioned you need to use session/query string to pass any variable/values to another page.
One click of the first button [first page] add query string parameter - http://example.com?chkboxClicked=true
<a href="secondpage.html?chkboxClicked=true>
<button>test button</button>
</a>
In the second page- check for the query string value, if present make the checkbox property to true.
In second page-
$(document).ready(function(){
if(window.location.href.contains('chkboxClicked=true')
{
$('#idOfCheckbox').prop('checked','checked');
}
})
Add it and try, it will work.
Communicating from one html file to another html file
You can solve these issue in different approaches
using localStorage
using the query parameters
Database or session to hold the data.
In your case if your application is not supporting IE lower versions localStorage will be the simple and best solution.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<a href="contact.html" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
<script>
function linkPageContact(clicked_id) {
localStorage.setItem("chkId", clicked_id);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script>
$(document).ready(function () {
var chkid = localStorage.getItem("chkId");
if (chkid === 'website-design-check') {
$('#website-design').attr('checked', true);
}
});
</script>
</body>
</html>

how to get textarea input from another HTML page

In a.html:
I have a textarea that is converted into a link after the user clicks the submit button. When the user clicks on the link they are redirected to b.html.
<textarea id="sentenceId">
</textarea>
<br>
<button type="button" id="buttonId" onclick="createLink(document.getElementById('sentenceId').value)">Submit
</button>
<p id="demo">
<a id ="link" href="b.html"></a>
</p>
In b.html:
I would like to display the original text.
In script.js:
function createLink(val) {
document.getElementById("link").innerHTML = val;
document.getElementById('buttonId').style.display = 'none';
document.getElementById('sentenceId').style.display = 'none';
}
If you want to open a new page and get the text there, you could use a post-form and an input[type="hidden"] to send the text and display it afterwards.
If you wand the link to be sendable, you'd either have to encode the text as get-parameter or save it to a database and add the id of the entry to the link.
As #Kramb already mentioned, localStorage is a possibility, but only if you stay on the same browser and both pages have the same domain.
Using localStorage
The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends—that is, when the browser is closed.
a.html
function createLink(val) {
document.getElementById("link").innerHTML = val;
document.getElementById('buttonId').style.display = 'none';
document.getElementById('sentenceId').style.display = 'none';
localStorage.setItem("textArea", val);
}
b.html
function getText(){
var textVal = localStorage.getItem("textArea");
}
Another option would be to use a query string.
a.html
function navigateTo(val){
window.href.location = "b.html?text=" + val;
}
This will pass the value of the text from textarea with the url during navigation. Once b.html has loaded, you can do the following.
b.html
function getText(){
var url = window.location.href;
var queryIndex = url.indexOf("=") + 1;
var passedText = url.substring(queryIndex);
document.getElementById('foo').value = passedText;
}
This is possible using JavaScript. You can do an AJAX call to another page on you website, and search for an element to get its content. In you're case an textarea
I wrote an example on codepen.io for you. Click here
To make things simpler im using jQuery in this example.
So how does it work?
First of, include jQuery inside the <head> tag of you're website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I created the following structure
structure
root
scripts
jQuery.min.js
index.js
index.html
textarea.html
Contents of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<button id="clickme">To load the textarea content, click me!</button>
<div id="content">The data from the textarea will be shown here, afte you click on the button :)</div>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>
Contents of texarea.html
<textarea id="textarea">
I am the content of the textarea inside the textarea.html file.
</textarea>
Contents of index.js
(function() {
$(document).ready(function() {
/**
* The button which triggers the ajax call
*/
var button = $("#clickme");
/**
* Register the click event
*/
button.click(function() {
$.ajax({
url: "textarea.html",
type: "GET"
}).done(function(response) {
var text = $(response).filter("#textarea").html();
$("#content").append("<br/><br/><strong>" + text + "</strong>");
});
});
});
})()
So what does index.js do exactly?
As you can see i created an Ajax call to the textarea.html file. The .done function holds the response data. The data inside it can be anything depending on the content of the textarea.html file.
$(response).filter("#textarea").html();
The above piece of code filters out the #textarea div and then gets the innerHTML using the jQuery html() function.
If you want to get the value of the textarea through the [value] attribute, you can replace above line to
$(response).filter("#textarea").val();
I believe you want to do this:
function createLink() {
var textvalue = document.getElementById('sentenceId').value;
document.getElementById("link").innerHTML = textvalue;
document.getElementById("buttonId").className ="hideme";
document.getElementById("sentenceId").className ="hideme";
}
.hideme{
display: none;
}
<textarea id="sentenceId">
</textarea>
<br>
<button id="buttonId" onclick="createLink()">Submit
</button>
<p id="demo">
<a id ="link" href="b.html"/>
</p>

How to add Automatically Changing Footer Credit using Javascript?

I want to make a footer credit protection using javascript. I've seen one using jquery. But it didn't worked properly. I want to apply that code to my blogger templates. I've written the following javascript code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>
</head>
<body>
<div>
Powered By <a href='http://google.com' id='#mycreditlink'>My Site</a>
</div>
</body>
</html>
But it isn't working properly either. I want it to make the footer url change automatically and if the id="mycreditlink" is removed by the client, it will redirect automatically to my website home. I need help immediately. If the code works, I will enode it and add to my templates.
<div>
Powered By <a href='http://google.com' id='mycreditlink'>My Site</a>
</div>
There is a error here: id='#mycreditlink' need to be like: id='mycreditlink'
And
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload=function(){lol();};
or
window.onload=lol();
You can make use of jQuery as I have done below...
<script type="text/javascript">
function lol(){
var footer = jQuery("#mycreditlink");
if (footer) {
jQuery(footer).attr("href", "http://grplusbd.net");
}
else {
window.location = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>

Using JavaScript in "button" self recognition on webpage

I have a website in which I have placed specific buttons inside of articles and outside in the head/body/footer. What I plan to do is when a user clicks on the button the JavaScript code should find out if the button is located inside of an article or outside of it and send the information to my parent website using PHP's $_GET function. This is the code on the 'child' website..
<!-- Button code -->
<p id="test"></p>
<a id ="webs" href= "" onclick="jams(this);document.getElementById('test').frameBorder=0"; target="test"><button>Click me!</button> </a>
The JavaScript functions it calls.
<p id="demo"></p>
<script>
function jams(z) {
var origZ=z;
var found= false;
var sString;
while ( z.nodeName != "HTML" && !found){
var elements = z.getElementsByTagName('a');
for(var i=0; i<elements.length; i++) {
var input = elements[i] ;
sString = input.getAttribute("href");
found = sString.search(window.location.hostname) != -1;
}
z=z.parentElement;
if ( z.nodeName != "HTML" && z.nodeName != "ARTICLE"){
z=z.parentElement;
var spString = (window.location.hostname);
var link = "http://www.parentwebsite.com/one.php?id="+spString;
origZ.href = link;
}
}
var link = "http://www.parentwebsite.com/two.php?id="+sString;
origZ.href = link;
}
</script>
I have two pages on the parent website, page one.php receives the websites name (www.child.com) if the button is located outside of the article. If the button is located within an article page two.php receives the articles URL.Using PHP's $_GET Variable.
$success = $_GET["id"];
So when the user clicks the button on the webpage the button will call the jams script and it recognizes where the button is situated on the webpage and sends to either one.php the website-name OR two.php the articles URL.
The script works just fine when the button is situated within an article,
the href =
http://www.parentwebsite.com/two.php?id=http://child-articles-url.com/
BUT it fails when it is outside of an article, the href
http://www.parentwebsite.com/two.php?id=http://www.parentwebsite.com/one.php?id=http://www.child.com/
What it needs to give is just:
http://www.parentwebsite.com/one.php?id=http://www.child.com/
P.S I have used chrome's debugger while working with this.
Thanks in advance! :)
I tried to solve your problem
index.php
<!DOCTYPE html>
<html>
<head>
<title>Using JavaScript in “button” self recognition on webpage</title>
</head>
<body>
<!-- Your HTML CODE -->
<div class="aricle">
<h2> Article Starts </h2>
This is inside Article
<h2> Article Ends </h2>
</div>
<br />
This is inside Article
<!-- Your JS CODE -->
<script type="text/javascript">
function link(button) {
if (button == 1) {
//alert("button inside article");
window.location.href='http://localhost/stackTest/one.php';
} else if (button == 2) {
//alert("button outside article");
window.location.href='http://localhost/stackTest/two.php';
}
}
</script>
</body>
</html>
one.php
<h2>This is One</h2>
two.php
<h1>This is Two</h2>
Hope this helps you to identify the buttons.
and you can use the anchor (a) tags for displaying as a button instead using <button> tag inside <a>..</a> tag.
If you are using Bootstrap simply use "Button" Class for <a>.

Variable not sent to other function

I have a number of links, that when clicked on, passes a variable thru to another portion of the page.
Yet, for some reason, I can’t figure it out! What am I missing?
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
return myid;
}
</script>
</head>
<body>
Click Me<br />
<script type="text/javascript">
document.write(myid);
</script>
</body>
You are getting a little mixed up here. Even though the function returns a value, it has nothing to return it to. Try this:
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
document.getElementById("debug").innerHTML = myid;
}
</script>
</head>
<body>
Click Me<br />
<div id="debug"></div>
</body>
if you want to use it later you need to declare myid as a global variable. its scope is currently only within myFunction. also the document.write() function will only execute at runtime so you need to have another function the executes that with every click, or just combine the two.
When you click the link all that happens is that the myFunction() is called which returns the string. The line document.write(myid); is not executed anymore so nothing is visible.
<script>
// This is global
var myid = ''
myfunc = function(a){
myid = "Hi There!" + a;
alert(myid);
}
test_global = function(){
alert(myid);
}
</script>
Set MYID
<input type="button" onclick="test_global();" value="Test MYID" />
Here is a simple example of some similar stuff:
clickme or ClickMeAlso
<input id='other' type='text'/>
<script>
function myfunc(a) {
return a + " howdy";
};
</script>
You can see this in action here:http://jsfiddle.net/5Sbn2/

Categories

Resources