Populating one select option with localStorage is unsuccessful

**StevenHu** · May 15, 2012 11:16

I am trying to add another option to the select drop-down, populated from a localStorage field. I haven't been successful. Here's my latest attempt:

Code:

<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
    <option value="">choose setup</option>
    <option value="setup 1">setup 1</option>
    <option value="setup 2">setup 2</option>
    <script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); formTesting.testingSetup.value += "\n <option value=\""+aboutSetup1+"\">"+aboutSetup1+"</option>"
    </script>
</select>

Google Chrome shows no errors, but it doesn't show the option, either. How do I populate a new option with a localStorage value with Javascript?

**ParkinT** · May 15, 2012 11:44

How about this?

Code:

    <script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
    </script>
<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
    <option value="">choose setup</option>
    <option value="setup 1">setup 1</option>
    <option value="setup 2">setup 2</option>
    <script> document.write("<option value=\""+aboutSetup1+"\">"+aboutSetup1+"</option>");</script>
</select>

**StevenHu** · May 15, 2012 12:00

Thanks, but Google still displays a blank page (so does FF). No errors.

**cpradio** · May 15, 2012 12:31

I believe you want this:

Code:

var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetup1, aboutSetup1);

**StevenHu** · May 15, 2012 12:54

No, the drop-down still doesn't show the option. I have:

Code:

  <script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.option[formTesting.testingSetup.option.length] = new option(aboutSetup1, aboutSetup1);</script>
            <select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
                                <option value="">choose setup</option>
                                <option value="setup 1">setup 1</option>
                                <option value="setup 2">setup 2</option>
            </select>

At least the screen is no longer blank.

**cpradio** · May 15, 2012 13:54

You need to run it in the onload event, or the domReady event.

Code:

window.onload = function() { var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.option[formTesting.testingSetup.option.length] = new option(aboutSetup1, aboutSetup1); }

**cpradio** · May 15, 2012 13:57

Also you copied and pasted my code incorrectly, where I have options, you have option, and where I have Option you have option.
Proof of Concept: http://jsfiddle.net/cpradio/YFdjf/

**StevenHu** · May 15, 2012 14:39

I put this in the head:

Code:

window.onload = function() { 
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.option[formTesting.testingSetup.option.length] = new option(aboutSetup1, aboutSetup1); 
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetup1, aboutSetup1);
}

and the select section is now:

Code:

<script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetup1, aboutSetup1);</script>
            <select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
                                <option value="">choose setup</option>
                                <option value="setup 1">setup 1</option>
                                <option value="setup 2">setup 2</option>
            </select>

Google tools says, "Uncaught TypeError: Cannot read property 'options' of undefined"

**cpradio** · May 15, 2012 14:50

1) Remove the script tag from your HTML markup. That is no longer necessary.
2) To fix the Error, you need to replace formTesting with the name of your <form> element.

**StevenHu** · May 15, 2012 16:12

I removed all the <script></script> information from the select.

The form name is correct: formTesting. (All my form names are prefixed with "form.")

I corrected the misspelled var. I entered data into the variable. The variable still doesn't appear in the dropdown. No errors in Chrome now. Now reads:

window.onload = function() {
var aboutSetupOne = localStorage.getItem('aboutSetupOne');
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetupOne, aboutSetupOne);
}

**cpradio** · May 16, 2012 03:07

My guess is your localStorage is either an empty string, null, or doesn't exist.
http://jsfiddle.net/cpradio/YFdjf/

My proof of concept code now handles when the localStorage is null. You may want to put something like console.log(localStorage.getItem('aboutSetupOne')); and open the Developer tools to see what it outputs.

**StevenHu** · May 16, 2012 10:14

Do I need to sign in to jsfiddle to make it work? Clicking on the drop-down box does not show anything other than setup 1 and setup 2 in the options. 'Testing' does not appear for me.

Adding the console code shows the var content successfully, so the var content is in memory. It's just not among the options.

Thanks for helping.

**cpradio** · May 16, 2012 10:15

What browser are you using? I am using Chrome v17 Portable, and in the Result pane I see Testing as the third option

**StevenHu** · May 16, 2012 10:26

I was using FF. I just tried it in Chrome and I see Testing as the third option. Unfortunately, this code is being run on the iPhone and it has to work there, on Webkit browsers. Since it works on Chrome, it should work on the iPhone. Still need to study this...

**cpradio** · May 16, 2012 10:37

I can't comment on the iPhone, I don't do any phone development. What I can say, is the code should work on just about any browser (not sure why it failed in Firefox -- I'll take a look as that bothers me; maybe FF doesn't support localStorage?).

**cpradio** · May 16, 2012 10:46

Got the FF issue resolved. Seems it was failing to load jQuery (due to needing to use POST instead of GET). I just changed the framework to MooTools (since we aren't using a framework, the framework is really unnecessary).

I also had to use document.formTesting instead of just formTesting.

**Logic Ali** · May 16, 2012 11:43

Code:

<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
    <option value="">choose setup</option>
    <option value="setup 1">setup 1</option>
    <option value="setup 2">setup 2</option>
</select>

<script type="text/javascript">

 var aboutSetup1 = localStorage ? localStorage.getItem( 'aboutSetup1' ) : null; 
 
 if( aboutSetup1 )
   document.getElementById( "testingSetup" ).options.add( new Option( aboutSetup1, aboutSetup1 ) );     
  
 // localStorage.setItem( 'aboutSetup1', 'The_New_Option' );
 
</script>

**StevenHu** · May 16, 2012 11:51

FF does support localstorage. The good news is that the iPhone understands Javascript just fine!

**StevenHu** · May 16, 2012 13:38

I'm using Jquery Mobile.

Chrome sees no errors in your #17 code, but I don't see the new options in the drop-down, either. Thanks for responding!

**Logic Ali** · May 16, 2012 14:22

Originally Posted by StevenHu

I'm using Jquery Mobile.

Chrome sees no errors in your #17 code, but I don't see the new options in the drop-down, either. Thanks for responding!

What do you see if you execute the following line in Chrome's address bar?

javascript:str="localStorage%20content\n\n";for(var%20x%20in%20localStorage){void(str+=x+'%20:%20'+localStorage[x]+'\n')}alert(str)

Note that when you paste the above line into the address bar, javascript: will probably be stripped-out and will need to be replaced before pressing Enter.

You should get an alert of all current localStorage content.

**StevenHu** · May 16, 2012 14:39

No matter how many times I type Javascript: before the line, Chrome strips it out, sorry.

I have a script on another page running the following to fill a textarea...

var aboutSetupOne = localStorage.getItem('aboutSetupOne');
form2.summaries.value += "***SUMMARIES***\n" + aboutSetupOne;

... and it's filled in with a string, no problem there.

**StevenHu** · May 16, 2012 14:45

OK THIS WORKS!!

<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
<option value="">choose setup</option>
<option value="setup 1">setup 1</option>
<option value="setup 2">setup 2</option>
</select>

<script type="text/javascript">
var aboutSetupOne = localStorage ? localStorage.getItem( 'aboutSetupOne' ) : null;

if( aboutSetupOne )
document.getElementById( "testingSetup" ).options.add( new Option( aboutSetupOne, aboutSetupOne ) );

// localStorage.setItem( 'aboutSetupOne', 'aboutSetupOne' );

Thank you very much!
</script>

**paul_wilkins** · May 16, 2012 17:20

Originally Posted by StevenHu

OK THIS WORKS!!

<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
<option value="">choose setup</option>
<option value="setup 1">setup 1</option>
<option value="setup 2">setup 2</option>
</select>

<script type="text/javascript">
var aboutSetupOne = localStorage ? localStorage.getItem( 'aboutSetupOne' ) : null;

if( aboutSetupOne )
document.getElementById( "testingSetup" ).options.add( new Option( aboutSetupOne, aboutSetupOne ) );

// localStorage.setItem( 'aboutSetupOne', 'aboutSetupOne' );

Thank you very much!
</script>

Now for some cleaning up.

Move the onchange event out of the HTML code, and in to the scripting where it belongs.
Remove the id attribute from select. When the select field is within the form, it should be accessed from the form's elements collection.
Removing also the size attribute, since that is only used when the multiple attribute is also given.

Code html4strict":

<select name="testingSetup">
    ...
</select>

Also, assigning testingSetup to a local variable, since we're now using it from multiple places

Code javascript:

var form = document.getElementById('formTesting'),
    testingSetup = form.elements.testingSetup,
...
testingSetup.onchange = function () {
    ...
};

Assuming that the form has an id of "formTesting" on it, that is the point of access we should use in order to access all of the form elements.
When we're already within the form, we can use this.form to easily access the form instead.

Code javascript:

testingSetup.onchange = function () {
    var form = this.form;
    form.elements.testingSetupLoad.value = this.value;
};

Next with aboutSetupOne, there is no given benefit to assign null to the value, so instead of using a ternary operator, we can use a guard condition which serves the same purpose, and makes our intentions crystal clear - that we are protecting against situations where localStorage is not supported.

Code javascript:

var ...,
    aboutSetupOne = localStorage && localStorage.getItem( 'aboutSetupOne' );

Lastly, always use braces for statement blocks, even if there is only one statement within them.
Not only does that protect you when you add another line to it, but it's also a consistant behaviour, which when missing acts as an instant warning of potential issues.

Code javascript:

if (aboutSetupOne) {
    testingSetup.options.add(new Option(aboutSetupOne, aboutSetupOne)); 
}

Which means that we end up with something like this:

Code javascript:

<form id="formTesting">
    <select name="testingSetup">
        <option value="">choose setup</option>
        <option value="setup 1">setup 1</option>
        <option value="setup 2">setup 2</option>
    </select>
    ...
    <input name="testingSetupLoad">
</form>

Code javascript:

var form = document.getElementById('formTesting'),
    testingSetup = form.elements.testingSetup,
    aboutSetupOne = localStorage && localStorage.getItem('aboutSetupOne');
 
if (aboutSetupOne) {
    testingSetup.options.add(new Option(aboutSetupOne, aboutSetupOne)); 
}
 
// localStorage.setItem('aboutSetupOne', 'aboutSetupOne');
 
testingSetup.onchange = function () {
    var form = this.form;
    form.elements.testingSetupLoad.value = this.value;
};

**Logic Ali** · May 17, 2012 07:59

Originally Posted by paul_wilkins

Next with aboutSetupOne, there is no given benefit to assign null to the value,

It's a good practice that avoids having to use typeof to avoid the error if( aboutSetupOne ), where the operand is undefined.

so instead of using a ternary operator, we can use a guard condition which serves the same purpose, and makes our intentions crystal clear - that we are protecting against situations where localStorage is not supported.

Code javascript:

var ...,
    aboutSetupOne = localStorage && localStorage.getItem( 'aboutSetupOne' );

We need to guard against doing that, because ANDing operands that could be undefined will generate an error:

Code:

aboutSetupOne = _localStorage && _localStorage.getItem( 'aboutSetupOne' );  //ERROR

**paul_wilkins** · May 17, 2012 08:08

Originally Posted by Logic Ali

It's a good practice that avoids having to use typeof to avoid the error if( aboutSetupOne ), where the operand is undefined.

When the operand is undefined, if(aboutSetupOne) is still falsy - there's no need to define the variable as being null.

Originally Posted by Logic Ali

We need to guard against doing that, because ANDing operands that could be undefined will generate an error:

No they won't. With:

Code:

aboutSetupOne = localStorage && localStorage.getItem( 'aboutSetupOne' );

JavaScript checks the first operand, and only if it's truthy does JavaScript then check the second operand. No errors are generated.
This is why in JavaScript the && operator is also called the "guard operator".

Please try to not bring inappropriate practices from other programming languages in to your JavaScript coding.
English spoken with a French accept can be quite wonderful. JavaScript written with influences from other languages isn't.

User Tag List

Thread: Populating one select option with localStorage is unsuccessful

Thread Tools

Display

Populating one select option with localStorage is unsuccessful

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions