存储值生成[对象HTMLInputElement] [英] Stored value generating [object HTMLInputElement]

问题描述

我有一个indexedDB并将其用于登录功能。我正在尝试在用户登录时使用用户信息填充表单。但是表单填充[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.

这是我带用户（db key）访问对象（用户）的地方

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

EDITThis是我运行的网站： http://www3.carleton.ca/clubs/ sissa / html5 / admin.html
我的网站编辑器正在保存时更新它，因此在尝试新内容时可能会对网站脚本进行更改。

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.

这是我带用户（db key）访问Object（用户）的地方

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'); 
}

我使用此函数getValues来存储我想要的各种字段。

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

编辑：我将变量test声明为全局并存储用户名（fn）。警报显示正确的名称，但填充仍然未定义。

    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 ;}        
}

这是我用来填充表格的函数[对象HTMLInputElement]

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;
}

推荐答案

只需看一行：

fName.value = fName

您正在将 fName 的值属性设置为 fName 本身。

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

不要创建大量全局变量，只需直接在 loggedUser 中使用 populateFields（）：

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

fName.value = loggedUser.fn;

编辑：查看您的网站，我看到您遗漏的重要一点。 在页面重新加载后，正在调用的 code>。因此， populateFields（）无法访问在重新加载页面之前创建的任何变量。

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.

因为我正在帮你做作业，所以我不想把答案放在银盘上。诀窍是必须从数据库中检索用户数据，并在调用之前或在函数内使用 populateFields（）。你可以使用户对象可用作全局变量，但最好将其作为参数传递。

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();
}

然后只需调用 populateFields（）直接来自 loggedIn（）而不是 getValues（）。

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

这篇关于存储值生成[对象HTMLInputElement]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！