'this' reference undefined

onchange of the select I'm running the get_cities_by_countyID() function. In the function I wrote:

select

get_cities_by_countyID()

function get_cities_by_countyID(countryID) {
var element = $(this);
alert (element.attr("class"));

// other logic...

element.closest('form').find('.cityField').html(html);
}


However the alert() prints undefined. How can I fix this?

alert()

undefined

<form>
<div class="col-md-5">
<label>country</label>
<select class="selectpicker" name="attraction[countryCode]" data-live-search="true" onchange="get_cities_by_countyID(this.value)">
<option value=""></option>
</select>
</div>
<div class="col-md-5">
<label>city</label>
<select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
<option value=""></option>
</select>
</div>
</form>


1 Answer
1

The issue is because when you assign event handler using the on* attributes the function is not called within the scope of the element which raised the event; it's called globally, hence this is the window. This is why you receive undefined.

on*

this

undefined

To fix this, pass the this reference in the event attribute to the function, then retrieve the needed values from there:

this

function get_cities_by_countyID(el) {
var $el = $(el);
var countryId = $el.val();
console.log($el.prop("class"));
//element.closest('form').find('.cityField').html(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-5">
<label>country</label>
<select class="selectpicker" name="attraction[countryCode]" data-live-search="true" onchange="get_cities_by_countyID(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="col-md-5">
<label>city</label>
<select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</form>

However you should note that using the on* event attributes is very outdated and should be avoided where possible. Unobtrusive event handlers are much better practice. They also allow you to use the this keyword within the handler as a reference to the element which raised the event. As you're using jQuery already you can implement them like this:

on*

this

$(function() {
$('#country').on('change', function() {
var $el = $(this);
var countryId = $el.val();
console.log($el.prop("class"));
//element.closest('form').find('.cityField').html(html);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-5">
<label>country</label>
<select class="selectpicker" name="attraction[countryCode]" data-live-search="true" id="country">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="col-md-5">
<label>city</label>
<select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</form>

onchange="get_cities_by_countyID(this.value)"

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.