The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Displaying name entered via form and saved via Sessionstorage
Max Eisner
post Nov 7 2015, 10:37 AM
Post #1





Group: Members
Posts: 4
Joined: 7-November 15
Member No.: 23,723



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 wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 7 2015, 12:40 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,933
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Max Eisner
post Nov 7 2015, 04:13 PM
Post #3





Group: Members
Posts: 4
Joined: 7-November 15
Member No.: 23,723



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 7 2015, 05:10 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,933
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. tongue.gif 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? unsure.gif

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Max Eisner
post Nov 7 2015, 06:11 PM
Post #5





Group: Members
Posts: 4
Joined: 7-November 15
Member No.: 23,723



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. tongue.gif 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? unsure.gif

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 smile.gif
Thanks for your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Max Eisner
post Nov 9 2015, 03:00 PM
Post #6





Group: Members
Posts: 4
Joined: 7-November 15
Member No.: 23,723



Hello smile.gif
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 biggrin.gif 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 9 2015, 03:37 PM
Post #7


.
********

Group: WDG Moderators
Posts: 7,933
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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th November 2018 - 03:58 AM