jQuery密钥在本地存储中未定义

Question

Wanting to be able to have multiple people take a survey then refresh etc. Need multiple people to be able to store a survey based on their name so each survey result is not overwritten when re-submitted. Trying to get the keys stored for each text box output 'person'.'name' = value. instead im getting a undefined.name = value

<p>
<label>Name:</label> <input name="MainName" type="text"/>
</p>

$('form').submit(function() {
 var person = $("#MainName").val();
 $('input, select, textarea').each(function() {
   var value = $(this).val(),
       name = $(this).attr('name');
       localStorage[person + "." + name] = value;

     console.log('stored key: '+name+' stored value: '+value);
});   
});

If the problem doesnt show above here is the whole: http://jsfiddle.net/5sG8v/

Answer 1

You're getting undefined returned because you're trying to reference an ID that does not exist: MainName is the name of your input field, not the id. Give it an ID of MainName , or whatever tickles your fancy:

<label>Name:</label> <input id="MainName" name="MainName" type="text"/>

Answer 2

The # is for selecting elements with a given id attribute. Your input doesn't have an id .

You could give the element an id , or select based on the name attribute:

$('input[name="MainName"]');

Answer 3

You have used $("#MainName").val(); to get the value of element having ID MainName .
# is used to access element with IDs but you haven't defined that ID in html.

So define the ID attribute of the textbox like this :

<label>Name:</label> <input id="MainName" name="MainName" type="text"/>