SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I keep the default text field blank?

    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:

    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:
    Code:
                    document.form2["aboutSetupOne"].value = localStorage["local.storage2.aboutSetupOne"];
                     if (document.form2["aboutSetupOne"].value == ''){ 
                    document.form2["aboutSetupOne"].value = localStorage["local.storage2. "]; }

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This code also does not work (it has no effect on the project at all):

    Code:
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Wild guess here, because I don't know JS, but what about

    var fill = "x";

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Wild guess here, because I don't know JS, but what about

    var fill = "x";
    The quotes are not necessary in JS i this context. Thanks!

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try
    Code:
    document.form2["aboutSetupOne"].value = localStorage["local.storage2.aboutSetupOne"] || "";
    etc.
    Tab-indentation is a crime against humanity.

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code JavaScript:
    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:

    Code JavaScript:
    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;
        }
    }
    I'm the web overlord for Graphic Business Systems

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Solved!

    OK, we got it working:

    Code:
    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. #10
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Solved!

    [sorry - double post.]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •