 Displaying name entered via form and saved via Sessionstorage |
  |
| Max Eisner |
 Nov 7 2015, 10:37 AM
Post
#1
|
|
Unregistered  |
Hello.
As the title describes, I wanted to display a value (here a name) that was entered by a form and saved to SessionStorage in an html document. Since I'm totally new to js, I don't get it to work... Now I ask you guys for some help. I tried the following, which I found as examples/templates on several tutorial sites and adjusted for my case, but it won't work. CODE <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Web/LocalStorage</title> </head> <body> <form id="Login/Name"> <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <input type="submit" value="Senden"> </div> </form> <script> window.onload = function () { document.getElementById('Login/Name').addEventListener('submit', function () { var name = document.getElementById('name').value; sessionStorage.setItem('name', name); }); } </script> <script> window.onload = function () { var name = sessionStorage.getItem('name'); if (name != "undefined" || name != "null") { document.getElementById('NameZeigen').innerHTML = "Hello " + name + "!"; } else document.getElementById('NameZeigen').innerHTML = "Hello!"; } } </script> </body> Thanks for your help! As you do any changes, it would be nice if you add comments to it so I can better understand what you did so I will learn to do for myself faster  |
|
|
 
|
| Christian J |
Nov 7 2015, 12:40 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
You can't have more than one window.onload on a page (if you need more, use addEventListener instead, or call several functions from inside a single window.onload). But in this case only one onload is needed, you can simply merge the two SCRIPT elements into one.
QUOTE CODE <form id="Login/Name"> <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <input type="submit" value="Senden"> </div> </form> Since the above is a real form, it will load a new URL with a querystring ?name=... For javascript you don't need that, you can simply use the text field and button by themselves. QUOTE CODE if (name != "undefined" || name != "null") With the OR operator || above, the IF condition becomes true even if name is "undefined", as long as name is not "null" too (or vice versa). You might use the logical AND operator && instead. QUOTE CODE document.getElementById('NameZeigen') There's no HTML element with the ID "NameZeigen" in the code example. Also keep in mind that not all browsers support local storage/session storage, that some browsers let you disable it, and that some users even disable javascript, so plan your applications accordingly (preferably using "progressive enhancement" design philosophy). This post has been edited by Christian J: Nov 7 2015, 04:13 PM |
  |
|
| Max Eisner |
Nov 7 2015, 04:13 PM
Post
#3
|
|
Unregistered |
QUOTE(Christian J @ Nov 7 2015, 06:40 PM)  You can't have more than one window.onload on a page (if you need more, use addEventListener instead, or call several functions from inside a single window.onload). But in this case only one onload is needed, you can simply merge the two SCRIPT elements into one. QUOTE CODE <form id="Login/Name"> <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <input type="submit" value="Senden"> </div> </form> Since the above is a real form, it will load a new URL with a querystring ?name=... For javascript you don't need that, you can simply use the text field and button by themselves. QUOTE CODE if (name != "undefined" || name != "null") With the OR operator above, the IF condition becomes true even if name is "undefined", as long as name is not "null" too (or vice versa). You might use the logical AND operator (&&) instead. QUOTE CODE document.getElementById('NameZeigen') There's no HTML element with the ID "NameZeigen" in the code example. Also keep in mind that not all browsers support local storage/session storage, that some browsers let you disable it, and that some users even disable javascript, so plan your applications accordingly (preferably using "progressive enhancement" design philosophy). I corrected my code after your instructions, but I still don't get it to work... Did I do anything wrong again? *noob* CODE <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Web/LocalStorage</title> </head> <body> <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <input type="submit" value="Senden"> </div> <script> window.onload = function () { document.getElementById('Login/Name').addEventListener('submit', function () { var name = document.getElementById('name').value; sessionStorage.setItem('name', name); }); } var name = sessionStorage.getItem('name'); if (name != "undefined" && name != "null") { document.getElementById('NameZeigen').innerHTML = "Hello " + name + "!"; } else document.getElementById('NameZeigen').innerHTML = "Hello!"; } } </script> <p id="NameZeigen"> Name goes here </p> </body> |
|
|
|
| Christian J |
Nov 7 2015, 05:10 PM
Post
#4
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE(Max Eisner @ Nov 7 2015, 10:13 PM) Did I do anything wrong again? *noob* At least I did.  Forgot that when you removed the FORM elements, the onsubmit event can't be used anymore. Instead you could use onclick on the button (which doesn't have to be a submit button). Also there was an extra { or two.Finally, the script saves the name when you click, but to actually see it printed inside "NameZeigen" you must reload the page. Is that how you want it to work?  Here's the complete version (I changed the code formatting in a way I find more easy to read, just a matter of taste): CODE <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <input type="button" value="Senden" id="x"> </div> <script> window.onload = function () { document.getElementById('x').addEventListener('click', function () { var name = document.getElementById('name').value; sessionStorage.setItem('name', name); }); var name = sessionStorage.getItem('name'); if (name != undefined && name != null) { document.getElementById('NameZeigen').innerHTML = "Hello " + name + "!"; } else { document.getElementById('NameZeigen').innerHTML = "Hello!"; } } </script> <p id="NameZeigen"> Name goes here </p> |
|
|
|
| Max Eisner |
Nov 7 2015, 06:11 PM
Post
#5
|
|
Unregistered |
QUOTE(Christian J @ Nov 7 2015, 11:10 PM) QUOTE(Max Eisner @ Nov 7 2015, 10:13 PM) Did I do anything wrong again? *noob* At least I did. Forgot that when you removed the FORM elements, the onsubmit event can't be used anymore. Instead you could use onclick on the button (which doesn't have to be a submit button). Also there was an extra { or two.Finally, the script saves the name when you click, but to actually see it printed inside "NameZeigen" you must reload the page. Is that how you want it to work? Here's the complete version (I changed the code formatting in a way I find more easy to read, just a matter of taste): CODE <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <input type="button" value="Senden" id="x"> </div> <script> window.onload = function () { document.getElementById('x').addEventListener('click', function () { var name = document.getElementById('name').value; sessionStorage.setItem('name', name); }); var name = sessionStorage.getItem('name'); if (name != undefined && name != null) { document.getElementById('NameZeigen').innerHTML = "Hello " + name + "!"; } else { document.getElementById('NameZeigen').innerHTML = "Hello!"; } } </script> <p id="NameZeigen"> Name goes here </p> You're my day saver! The reloading thing is not a problem, because this was just for me to find out how it works. In my final use, the name will be displayed on a redirected page, so that won't cause any problems. So on the first page, you enter the name, then get redirected and the name will appear in a menu bar  Thanks for your help! |
|
|
|
| Max Eisner |
Nov 9 2015, 03:00 PM
Post
#6
|
|
Unregistered |
Hello
May I annoy you again? I already explained what I was going to do with the SessionStorage/LocalStorage thing, and I thought that I'm smart enough to figure out how to do it. I figured out how to load the var on the second page, but it shows always the alternative, so I don't get it to work that if I click a button on the first page, the Name is saved in LocalStorage and then, after saving, it redirects you to the second page. The saving thing won't work... I think I'm too stupid for that  I tried several methods, like calling a function through the button, or having two functions, one that checks if the button is clicked and then calls the second function to save and redirect. But it won't work... Is it possible to get your help again? ^^ Thanks a lot! Max This post has been edited by Max Eisner: Nov 9 2015, 03:00 PM |
|
|
|
| Christian J |
Nov 9 2015, 03:37 PM
Post
#7
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
You could use this part on the first page:
CODE <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <input type="button" value="Senden" id="x"> </div> <script> window.onload = function () { document.getElementById('x').addEventListener('click', function () { var name = document.getElementById('name').value; sessionStorage.setItem('name', name); location.href='page2.html'; }); } </script> and then this on page2.html: CODE <script> window.onload = function () { var name = sessionStorage.getItem('name'); if (name != undefined && name != null) { document.getElementById('NameZeigen').innerHTML = "Hello " + name + "!"; } else { document.getElementById('NameZeigen').innerHTML = "Hello!"; } } </script> <p id="NameZeigen"> Name goes here </p> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:15 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC