Stored value generating [object HTMLInputElement]

问题

I have an indexedDB and using it for a login function. I'm trying to populate a form with the users information when they log in. However the form populates with [object HTMLInputElement] instead of the users info.

This is where I take the user (db key) to access the Object (the user)

EDITThis is my site where it's running: http://www3.carleton.ca/clubs/sissa/html5/admin.html My site editor is updating it as I save, so there may be changes to the site script as I try new things.

This is where I take the user (db key) to access the Object (the user)

function loginCheck(user,pass){    db.transaction("users").objectStore("users").get(user).onsuccess = function(event) {
    var loggedUser = event.target.result;
        if(!loggedUser){
            alert('Sorry, Username does not exist. Please try again.');
        }else if(pass !== loggedUser.pw ){
            alert('Incorrect log in combination. Please try again.');
            }else{loggedIn(loggedUser);}        
    }    
}
function loggedIn(loggedUser){
    var u=loggedUser;
    alert('Welcome '+u.fn+' '+u.ln+' to Macroplay');

    //function to populate fields 
    alert('get values called'); 
    getValues(u);

    //session store     
    var signedin = 'user';
    var username = u.userName;
    newLocal(signedin,username);
    alert('local storage set'); 
}

I use this function getValues to store the various fields I want from the object.

EDIT: I declared the variable test as global and stored the users first name (fn). The alerts show the correct name but the populate still gives me undefined.

    var test;
function getValues(loggedUser){
    var u = loggedUser;
    alert('storing first name');
    test = u.fn;
    alert('First name = '+test);
    lName = u.ln; 
    users = u.userName;
    pass = u.pw;
    email = u.em;
    dob = u.dob;
    tel = u.tel;
    bio = u.bio;
    school = u.scl; 
    alert('user values stored');  
    if(u.gender == 'M'){
        gender[0].checked= true ;
    }else{gender[1].checked= true ;}        
}

This is the function I use to populate the form that's giving me [object HTMLInputElement]

function populateFields(){
    alert('Name of populated field: '+test);
    fName.value = test;
    lName.value = lName;
    users.value = users;
    pass.value = pass;
    email.value = email;
    dob.value = dob;
    tel.value = tel; 
    bio.value = bio;
    terms.disabled = true;
    school.value = school;  
    alert('populate fields done');

    save.value = 'Update';
    signin.innerHTML = 'Log Out';
    registerLabel.innerHTML = 'Account Information';

     //open user info form
    var accountInfo = document.getElementsByTagName('details');
    accountInfo[1].open = open;
}

回答1:

Just look at one line:

fName.value = fName

You are setting the value property of fName to fName itself.

Rather than creating numerous global variables, just use loggedUser directly in populateFields():

fName.value = loggedUser.fn;

Edit: Looking at your site, I see the important bit you left out. populateFields() is being called after the page reloads. So, populateFields() does not have access to any variable created before the page reloaded.

Since I'm helping you with homework, I don't want to just hand you the answer on a silver platter. The trick is that the user data must be retrieved from the database and made available to populateFields() before it is called, or from within the function. You can make the user object available as a global variable, but it may be better to pass it in as a parameter.

You probably want to also cancel the form submission:

document.getElementById("loginForm").onsubmit = function (e) {
    e.preventDefault();
}

And then just call populateFields() directly from loggedIn() instead of getValues().

来源：https://stackoverflow.com/questions/15540127/stored-value-generating-object-htmlinputelement

标签

javascript

html5

object

indexeddb