jquery $(this).attr('id') is giving undefined result

Question

I am trying to fetch details of the id which element is changed. But when I am trying to find it using below code, it is giving error.

HTML:

<input type="text" required="required" placeholder="Enter city name" class="get_neighborhood" maxlength="30" id="city" value="P" name="city" data-invalid="">
<input type="text" placeholder="State code" maxlength="2" class="get_neighborhood" required="required" id="state" value="AA" name="state">

JS:

$(document).ready(function() {
    $(".get_neighborhood").on('change',function() {
        city = $('#city').val();
        ajax_url = 'alternate_address/ajax_get_country/';

        $.ajax({
            type: 'POST', // or 'POST', whatever you want.
            dataType: 'json', // output_value will be a plain text string.
            data: {
                city: city
            },
            url: ajax_url,
            beforeSend: function(msg) {                

            },
            success: function(output_value) {
                myid = $(this).attr('id');                
                //var id=this.id;
                console.log(myid.toSource());

            },
            error: function(output_value) {
                alert('err');                    
            }
        });
    });
});

this gives error that myid is undefined. when I change city or state field.

this is refering to you success function – pethel May 30 '14 at 06:23 — pethel, May 30 '14 at 06:23
I do not understand why give -1 or this question. ??? – TechCare99 May 30 '14 at 06:28 — TechCare99, May 30 '14 at 06:28
Thank you all for quick replies. – TechCare99 May 30 '14 at 06:31 — TechCare99, May 30 '14 at 06:31

score 1 · Accepted Answer · answered May 30 '14 at 06:19

Try to cache the $(this) reference outside that ajax call and use it inside of that.

Full code:

$(".get_neighborhood").on('change',function() {

        city = $('#city').val();
        ajax_url = 'alternate_address/ajax_get_country/';
        _this = $(this);

        $.ajax({
            type: 'POST', // or 'POST', whatever you want.
            dataType: 'json', // output_value will be a plain text string.
            data: {
                city: city
            },
            url: ajax_url,
            beforeSend: function(msg) {                

            },
            success: function(output_value) {
                myid = _this.attr('id');                
                //var id=this.id;
                console.log(myid.toSource());

            },
            error: function(output_value) {
                alert('err');                    
            }
        });

});

all answers are same.... but you wrote it first. thanks, :) – TechCare99 May 30 '14 at 06:29 — TechCare99, May 30 '14 at 06:29

score 1 · Answer 2 · answered May 30 '14 at 06:20

In ajax, you lose the element event context so you cannot access it inside ajax, what you need to do is store it's id after event in variable and the use it in scucess:

$(".get_neighborhood").on('change',function() {
        city = $('#city').val();
     var Id = this.id;

     //or

    var element = $(this);

......

.....

success: function(output_value) {
                myid = Id;            

}

or store element reference and use like this :

$(".get_neighborhood").on('change',function() {

        var element = $(this);

    ......

    .....

    success: function(output_value) {
                    myid = $(element).attr("id");            

    }

thank you .... ehsan aapka :) – TechCare99 May 30 '14 at 06:33 — TechCare99, May 30 '14 at 06:33

score 1 · Answer 3 · answered May 30 '14 at 06:20

You are using $(this) in the wrong context. Store event source in some variable and use it in success.

$(document).ready(function() {
    $(".get_neighborhood").on('change',function() {
        source = $(this); //Store $(this);
        city = $('#city').val();
        ajax_url = 'alternate_address/ajax_get_country/';

        $.ajax({
            type: 'POST', // or 'POST', whatever you want.
            dataType: 'json', // output_value will be a plain text string.
            data: {
                city: city
            },
            url: ajax_url,
            beforeSend: function(msg) {                

            },
            success: function(output_value) {
                myid = source.attr('id'); //Use source here.                
                //var id=this.id; 
                console.log(myid.toSource());

            },
            error: function(output_value) {
                alert('err');                    
            }
        });
    });
});

jquery $(this).attr('id') is giving undefined result

3 Answers3