Get value from text input after focusout & display data from that value

Question

I have 3 input text for UserID, UserName, and 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)

satriodwih | Satrio DwiHuripto | sdwihuripto@lala.com

1. textbox UserId is shown but textbox UserName and email is hidden
2. When I type satriodwih in userID and focusOut(click tab or click outside the textbox), textbox username and email shown and their value comes from database.

And I Have jquery for focusout like this :

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

What must I do? Stuck too long time.

Answer 1

You need to create a controller action method that returns json containing the UserName and Email like this:

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

Then change your script section to this:

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

Please note that I use the url /home/getuserdata in the above code because I assume the GetUserData action method is in HomeController.cs. If GetUserData is in a different controller then you must change the url, i.e /users/getuserdata if it's in UsersController.cs.