How do I keep the default text field blank?

JavaScript
1

When a user has entered text into form fields and hits the Save button, the text is saved into local storage. When they hit the Load button at a later date, the text fields are populated.

If the user does NOT enter text and hits the Load button, the default empty text fields are populated with the word “undefined.” How do I keep the field blank? Because if they do this accidentally, they’ll be hitting the back button repeatedly to delete the word in every field (this is on an iPhone).

Here is the Load code:

            /*
             * Insert data into form fields from local storage.
             */
            function loadData()
            {                
                document.form2["aboutSetupOne"].value = localStorage["local.storage2.aboutSetupOne"];
                document.form2["aboutSetupTwo"].value = localStorage["local.storage2.aboutSetupTwo"];
                document.form2["aboutSetupThree"].value = localStorage["local.storage2.aboutSetupThree"];
                document.form2["aboutSetupFour"].value = localStorage["local.storage2.aboutSetupFour"];
                document.form2["aboutSetupFive"].value = localStorage["local.storage2.aboutSetupFive"];
                }

I don’t know enough about JS to fix this.

This does not work:

                document.form2["aboutSetupOne"].value = localStorage["local.storage2.aboutSetupOne"];
                 if (document.form2["aboutSetupOne"].value == ''){ 
                document.form2["aboutSetupOne"].value = localStorage["local.storage2. "]; }
2

This code also does not work (it has no effect on the project at all):

var fill = x;
                document.form2["aboutSetupOne"].value = localStorage["local.storage2.aboutSetupOne"];
if (aboutSetupOne.length < 1) { localStorage["local.storage2.fill"]; }

I thought it should add an “x” to each field, but it does not.

3

Wild guess here, because I don’t know JS, but what about

var fill = “x”;

4

Try

document.form2["aboutSetupOne"].value = localStorage["local.storage2.aboutSetupOne"] [COLOR="#0000FF"]|| ""[/COLOR];

etc.

5

I don’t know about the “fill” part, but the reason empty fields are populated with the word “undefined” is because that’s what those localStorage values are equal to.

If you don’t save anything in localStorage[“local.storage2.aboutSetupOne”], then it’s going to be equal to undefined. And if you try to set a text input’s value to undefined, then it will be set to the string “undefined”.

The solution is to first check each value in localStorage before assigning it:


if (localStorage['local.storage2.aboutSetupOne']) {
    document.form2['aboutSetupOne'].value = localStorage['local.storage2.aboutSetupOne'];
}

But doing it by hand like that for each value is cumbersome, so you could store the names in an array, and cycle through it:


function loadData() {
    var fields = [
        'aboutSetupOne',
        'aboutSetupTwo',
        'aboutSetupThree',
        'aboutSetupFour',
        'aboutSetupFive'
    ],
    i = 0, l = fields.length,
    input, stored;

    while (i < l) {
        input = fields[i];
        stored = localStorage['local.storage2.' + input];
        if (stored) {
            document.form2[input].value = stored;
        }
        i += 1;
    }
}
6

sdleihssirhc, thanks for the explanation. I figured that “undefined” was correct behavior. I am trying to prevent that default behavior.

I must not be implementing your code properly, for after I do, inputted data doesn’t save or load. I had completely replaced my loadData code with yours, and filled in the first three fields to test.

Thanks!

7

I thought of pre-filling every local storage field with a space, then load would show a blank space; but then I think the placeholder text wouldn’t appear.

8

The quotes are not necessary in JS i this context. Thanks!

9

OK, we got it working:

function loadData()
			{
				// setup summaries 3x
				var setupSummariesString = '';
				var showSummary = false;
				setupSummariesString += "Setup 1 Summary: ";
				if (localStorage["local.storage2.aboutSetupOne"] == undefined)
				{
					document.form2["aboutSetupOne"].value == '';
				}
				else
				{
					document.form2["aboutSetupOne"].value = localStorage["local.storage2.aboutSetupOne"];
					setupSummariesString += localStorage["local.storage2.aboutSetupOne"];
					showSummary = true;
				}
10

[sorry - double post.]