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 HTMLInputE

Solution 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().