如何通过Javascript编辑/保存对文本框的更改

Question

我正在开发一个简单的CRUD应用程序，我在其中为用户登录，注册和帐户部分。用户登录后，点击帐户，可以选择编辑和保存更改。您会注意到我“这里是您要将禁用更改为true的位置”和“此处您将更新数据库中的用户信息”。这是我应该实现代码的地方。如何让这些编辑和保存按钮通过javascript工作？这是我的代码：

HTML：

<nav>
    <div><a href="#">HOME</a></div>
    <div><a href="#">ABOUT</a></div>
    <div><a href="#">SPEAKERS</a></div>
    <div><a href="#">INFO</a></div>
    <div class="join-button">
        <a href="#">JOIN IN</a>
        <div class="join-holder">
            <div class="sign-in">
                <form>
                    <h2>Sign In</h2>
                    <label>User Name:</label>
                    <input id="username" type="text" value="name@name.com">
                    <label>Password:</label>
                    <input id="siPW" type="password" value="12345678">
                    <input class="submit-button si-submit" type="submit">
                </form>
            </div>
            <div class="sign-up">
                <form>
                    <h2>Sign Up</h2>
                    <label>Name:</label>
                    <input id="fullName" type="text" value="name">
                    <label>Email:</label>
                    <input id="email" type="email" value="name@name.com">
                    <label>Password:</label>
                    <input id="pw" type="password" value="12345678">
                    <input class="submit-button su-submit"  type="submit">
                </form>
            </div>
        </div>
    </div>
    <div class="account"><a href="#">Account</a></div>
    <div class="signOut"><a href="#">Sign Out</a></div>
</nav>

<div class="home">
Home
</div>

JS：

function setBindings() {
    $(".account").click(function (e) {
        var ui = DATA.getUserInfo();
        if($.isEmptyObject(ui)){
            swal("Oops...", "You need to sign in!", "error");
        }else{
            $(".home").html('<label>Name:</label><input disabled="true" id="userFullName" value="' + ui.fullName +'" type="text"><button class="edit">Edit</button><button class="save">Save</button>');
            $(".edit").click(function (e) {
                //here is where you want to change the disable to true
            });

            $(".save").click(function (e) {
                //here is where you will update the user information in the database
            })
        }

    });

    $(".signOut").click(function (e) {
        DATA.signOut();
    });

    $(".su-submit").click(function (e) {
        e.preventDefault();
        var fullName = $("#fullName").val(),
            email = $("#email").val(),
            pw = $("#pw").val(),
            cpw = $("#cPw").val();

        if(fullName == ""){
            swal("Oops...", "You need a name!", "error");
        }else if(!validateEmail(email)){
            swal("Oops...", "Your email is not valid!", "error");
        }else if(pw == "" || pw.length < 8){
            swal("Oops...", "Your password needs to be longer than 8!", "error");
        }else if(cpw == "" || cpw.length < 8 || pw != cpw){
            swal("Oops...", "Your passwords don't match!", "error");
        }else{
            var info = {
                "fullName": fullName,
                "email": email,
                "password": pw
            };
            DATA.addUser(info, addedUser);
            // swal("Congrats", "You are signed up!", "success");
        }
    });

    $(".si-submit").click(function (e) {
        e.preventDefault();
        var username = $("#username").val(),
            pw = $("#siPW").val();

        if(username == "" || validateEmail(username) == false){
            swal("Oops...", "You need a username!", "error");
        }else if(pw == "" || pw.length < 8){
            swal("Oops...", "Your password needs to be longer than 8!", "error");
        }else{
            DATA.checkUser(username, pw, userSignIn);
        }
    });
}

function addedUser(data) {
    console.log("data " , data);
}

function userSignIn(data) {
    console.log(data.fullName);
    swal("Congrats", data .fullName + " You are signed in!", "success");
};

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

$(document).ready(function () {
   setBindings();
});

Data JS：

    var userLoggedIn = {};

    var _checkUser = function (username, password, callback) {
        $.ajax({
            url: _baseQueryURL + 'q={"email":"' + username + '","password":"' + password +'"}' + _queryApiKey,
            type: "GET",
            contentType: "application/json"
        }).done(function (data) {
            userLoggedIn = data[0];
            callback(data[0]);
        }).fail(function (error) {
            console.log("error " + error);
        });
    };

    var _addUser = function (userInfo, callback) {
        console.log(userInfo.email + ' ' + userInfo.password);
        $.ajax({
            url: _baseQueryURL + 'q={"email":"' + userInfo.email + '","password":"' + userInfo.password +'"}&c=true' + _queryApiKey,
            type: "GET",
            contentType: "application/json"
        }).done(function (data) {
            if(data == 0){
                $.ajax({
                    url: _baseURL + _apiKey,
                    data: JSON.stringify( userInfo ),
                    type: "POST",
                    contentType: "application/json"
                }).done(function (data) {
                    userLoggedIn = data;
                    callback(data);
                }).fail(function (error) {
                    swal("Oops...", "You have an error!", "error");
                });
            }else if(data == 1){
                swal("Oops...", "You are already signed up. Please Sign in!", "error");
            }

        }).fail(function (error) {
            console.log("error " + error);
        });
    };

    var _signOut = function () {
        userLoggedIn = {};
    };

    var _getUserInfo = function () {
        return userLoggedIn;
    };

    return {
        checkUser: _checkUser,
        addUser: _addUser,
        signOut: _signOut,
        getUserInfo: _getUserInfo
    }
})();