user2224493
user2224493

Reputation: 269

How to set an input textbox with the result from an ajax call

Need to autopopulate firstname and last name textbox with results from ajax call. Here is aspx web form:

       <input id="firstName" type="text" size="26"  maxlength="20" name="firstName" tabindex="2" />                           
      <input id="lastName" type="text" value="" size="26" maxlength="20" name="lastName" tabindex="4" />

here is the jquery script with ajax call:

  <script>
    $("#lifeNumber").on('focusout', function (evt) {
        var options = {};
        options.url = "pcfform.aspx/GetEmployees";
        options.data = JSON.stringify({ lifeNumber: $(evt.target).val()  });
        options.type = "POST";
        options.dataType = "json";
        options.contentType = "application/json";
        options.success = function (result) {
           //need help here

            }
        };
        options.error = function (xhr, status, err) {
            alert(err);
        };
        $.ajax(options);
    });
</script>

Here is the WebMethod in aspx:

       public class Employee
       {
         public string FirstName { get; set; }
         public string LastName { get; set; }
       }

    [WebMethod]
    public static List<Employee> GetEmployees(string lifeNumber)
    {
        PCF.Entities.Data.Entities db = new PCF.Entities.Data.Entities();
        var data = db.MasterTables
                    .Where(x => x.Life_Hosp == lifeNumber)
                    .Select(x => new Employee
                    {
                        FirstName = x.FirstName,
                        LastName = x.LastName
                    });
        return data.ToList();
    }

Upvotes: 0

Views: 11412

Answers (1)

andybeli
andybeli

Reputation: 856

If you are struggling with the success method this code should help you:

$("#lifeNumber").on('focusout', function (evt) {
        var options = {};
        options.url = "pcfform.aspx/GetEmployees";
        options.data = JSON.stringify({ lifeNumber: $(evt.target).val()  });
        options.type = "POST";
        options.dataType = "json";
        options.contentType = "application/json";
        options.success = function (result) {


            $('#firstName').val(result.d[0].FirstName);
            $('#lastName').val(result.d[0].LastName);

            }
        };
        options.error = function (xhr, status, err) {
            alert(err);
        };
        $.ajax(options);
    });

Upvotes: 1

Related Questions