从focusout后的文本输入中获取值&显示来自该值的数据

本文关键字：显示 数据 获取 focusout 文本 输入 | 更新日期: 2023-09-27 18:13:26

我有三个输入文本:UserID, UserName和email;

<input type="text" name="UserID" class="form-control" id="input-loader" placeholder="User ID">
<input type="text" name="UserName" class="form-control" id="user-show" placeholder="User Name">
<input type="text" name="Email" class="form-control" id="email-show" placeholder="Email">

in My database:

UserID(string) | UserName(string) | email(string)

satriodwiwith | satriowihuripto | sdwihuripto@lala.com

  1. 文本框UserId显示，但文本框UserName和email隐藏
  2. 当我在userID和focusOut中键入satriodwiwith(单击选项卡或单击文本框外)时，显示的文本框用户名和电子邮件及其值来自数据库。

我为focusout设置了这样的jquery: 

$(function () {
$body = $("body"),
$("#user-show").hide(),
$("#email-show").hide(),
$(function () {
    $("#input-loader").focusout(function () {
        var UserIDc = document.getElementById("#input-loader");
        $(function () {
            $.get("/mockjax", function () {
                $("#user-show").show(),
                $("#email-show").show(),
            });
        });
    });
});
$(document).on({
    ajaxStart: function () { $body.addClass("loading"); },
    ajaxStop: function () { $body.removeClass("loading"); }
});});

我必须做什么?卡住时间太长

从focusout后的文本输入中获取值&显示来自该值的数据

您需要创建一个控制器动作方法，返回包含UserName和Email的json，如下所示:

[HttpGet]
public ActionResult GetUserData(string userID)
{
    string userName = ...; // get user name from database here
    string email = ""; // get email from database here
    return Json(new { ID = userID, UserName = userName, Email = email }, JsonRequestBehavior.AllowGet);
}

然后将脚本部分更改为:

$(function () {
    $body = $("body");
    $("#user-show").hide();
    $("#email-show").hide();
    $(function () {
        $("#input-loader").focusout(function () {
            // get value from input-loader textbox
            var UserIDc = $(this).val();
            $(function () {
                // call /home/getuserdata and pass the user id from input-loader textbox
                $.get("/home/getuserdata?userID=" + UserIDc, function (result) {
                    // set user name and email textbox value 
                    $('#user-show').val(result.UserName);
                    $('#email-show').val(result.Email);
                    // show user name and email textbox
                    $("#user-show").show();
                    $("#email-show").show();
                });
            });
        });
    });
    $(document).on({
        ajaxStart: function () { $body.addClass("loading"); },
        ajaxStop: function () { $body.removeClass("loading"); }
    });
});

请注意，我在上面的代码中使用url /home/getuserdata，因为我假设GetUserData操作方法在HomeController.cs中。如果GetUserData是在一个不同的控制器，那么你必须改变url，即/users/getuserdata，如果它是在UsersController.cs。

为什么要把这么多函数放在一起呢?

问题是在document.getElementById("#input-loader");使用#。你应该把它去掉。

$(function () {
    $body = $("body"),
    $("#user-show").hide(),
    $("#email-show").hide(),
    $("#input-loader").blur(function () {
        // you should not use # here:
        // var UserIDc = document.getElementById("input-loader"); 
        // and also it's simpler to use:
        var UserIDc = $("#input-loader");
        $.get("/mockjax", function () {
            $("#user-show").show(),
            $("#email-show").show(),
        });
    });
    $(document).on({
        ajaxStart: function () { $body.addClass("loading"); },
        ajaxStop: function () { $body.removeClass("loading"); }
    });
});
相关文章：