Populate TextBox from Database using JQuery or AJAX

Question

Hi, I have the following scenario: An SQL 2000 database with a table containing the columns UserID and UserName. A webpage with TextBox1 and TextBox2.

I need to use JQuery, plain JavaScript or AJAX to accomplish the following: When I type the UserID in TextBox1 and press the Tab key, TextBox2 will populate with the corresponding UserName.

I have this implementation in ASP.NET using C# and calling a web service, however I want to avoid postbacks when doing the table search and I know JavaScript or AJAX is the way to go.

Thank you.

Answer 1

Use AJAX.

jQuery has some built in ajax functionality.

You can issue an AJAX request to the server and get the result and fill the result to the textbox.

Answer 2

There are a few different ways to do this. The easiest is to use an UpdatePanel. This will basically be a drop in solution which will work with your existing code.

If you want to use jQuery, you will need to add a webservice or something else to return the data. You can call the webservice with jQuery like this

var parameters = { UserId: userId }

$.ajax({        
       type: "POST",
       url: "http://url to webservice",
       data: parameters,
       contentType: "application/json; 
       charset=utf-8",
       dataType: "json",
       success: function(result) {
              $("#id of username field").val(result);
       },
       error: function(e) {  
           alert(e);
       }
});