Help - Search - Members - Calendar
Full Version: Displaying name entered via form and saved via Sessionstorage
HTMLHelp Forums > Programming > Client-side Scripting
Max Eisner
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
Christian J
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).
Max Eisner
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
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>
Max Eisner
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!
Max Eisner
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
Christian J
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>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.