Populate Textbox based on another Textbox MVC 4

Question

i'm trying to populate textbox value based on another textbox but i cannot populate the the other textbox. i'm sharing my code please guide me with best solution

Action Method:

[HttpGet]
        public ActionResult GetInfo(string Email)
        {

            var result = (from c in db.Customers
                          where c.Email.ToLower().Contains(Email.ToLower())
                          select new { c.FirstMidName }).Take(6);

            return Json(result, JsonRequestBehavior.AllowGet);
        }

Script:

$(document).ready(function () {
            var Email;
            $(function () {
                $("#Email").keydown(function () {
                    Email = $("#Email").val();
                    $.ajax({
                        type: "GET",
                        url: 'Admin/Ticket/GetInfo',
                        data: { Email: Email },
                        success: function (data) {
                            if (data) {
                                alert(data);
                                $('#Phone').text(data);
                            }
                        }
                    });
                });
            });

i have searched internet but couldn'd find any suitable solution. please guide me with this

Why are you using document-ready handler inside document-ready handler? — Satpal
– Satpal, Commented May 21, 2014 at 7:03
@Satpal i have tried removing this but i'm still getting the same problem — DevWithSigns
– DevWithSigns, Commented May 21, 2014 at 7:05
Nothing strikes me as error-prone in the things you've currently posted (except for maybe the double document.ready, but you said that's fixed). Could you elaborate on what happens when you try it? Does the ajax call get sent out? Does it return? Do you get the alert? What error do you get? — Flater
– Flater, Commented May 21, 2014 at 7:07

Ehsan Sajjad · Accepted Answer · 2014-05-21 07:32:09Z

2

you need to do like this and you have to use val() instead of text() to set the textbox value:

success: function (data) {
                            if (data) {
                                alert(data.FirstMidName);
                                $('#Phone').val(data.FirstMidName);
                            }

also in your ajax call set dataType:

 $.ajax({
                        type: "GET",
                        url: 'Admin/Ticket/GetInfo',
                        data: { Email: Email },
                        dataType:"json",
                        success: function (data) {
                            if (data) {
                                alert(data.FirstMidName);
                                $('#Phone').val(data.FirstMidName);
                            }
                        }
                    });

See FIDDLE DEMO

edited May 21, 2014 at 7:32

answered May 21, 2014 at 7:10

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

DevWithSigns Over a year ago

i'm not getting any alert

DevWithSigns Over a year ago

i have tried this before, i have clearly mentioned that i'm getting the json response successfully but cannot bind the value to textbox

Ehsan Sajjad Over a year ago

IN alert can you see name?

DevWithSigns Over a year ago

No i just see undefined

Ehsan Sajjad Over a year ago

you have missed datatype attribute of ajax set it to json like this: dataType:"json"

|

Flater · Accepted Answer · 2014-05-21 07:17:16Z

1

@Flater i'm not getting any error, i'm getting the JSON response successfully here it is "FirstMidName":"usama" but it is not binding to texbox this is the problem

$('#Phone').text(data); //your code

The problem is that you're setting the text to data, but you've confirmed that data has a field named FirstMidName (in other words, data isn't a string!). Therefore, you should reference the field:

$('#Phone').val(data.FirstMidName); //my fix

Edit I also changed .text() to .val(). You should use the latter when working with form input elements.

edited May 21, 2014 at 7:17

answered May 21, 2014 at 7:12

Flater

14.1k4 gold badges45 silver badges67 bronze badges

6 Comments

Flater Over a year ago

Try to add the following to the success callback to see if your data is of the correct format: alert(JSON.stringify(data)) this should shouw you your entire data object. alert(data.FirstMidName) this should show you the value you want. Can you confirm if both alert boxes show you what you're expecting?

Flater Over a year ago

Nevermind! Think I found it :) Use $('#Phone').val(data.FirstMidName); Notice I changed .text() to .val().

DevWithSigns Over a year ago

i'm getting alert undefined

Flater Over a year ago

For which one? Doesn't really matter, but that mean that whatever you punt in the alert doesn't exist (or doesn't have any sort of value, think of it as null). So that means either your data object is empty, or it doesn't have a field named FirstMidName.

DevWithSigns Over a year ago

it is not empty i have tried putting the direct link in browser and download the json response file, can u tell me some other solution for this? like how i can populate other textbox value on the base of the current textbox?

|

Diin · Accepted Answer · 2017-01-04 18:52:30Z

0

I have had a similar issue with your problem and I am not sure if you managed to fix but just change.

$('#Phone').val(data.FirstMidName);
to
$('#Phone').val(data[0].FirstMidName);

The JSON result is an array so you have to use index. Hope this helps someone else. Also in your controller Action you are requesting for more than one record you have to change to Take(1)

answered Jan 4, 2017 at 18:52

Diin

58511 silver badges41 bronze badges

Collectives™ on Stack Overflow

Populate Textbox based on another Textbox MVC 4

3 Answers 3

11 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related