This is a javascript that I have found in github, this is the link for it.
The problem is that when I used the ph-address-selector.js, it works but instead of fetching the “display name”, it fetches the “code ids”, which is the true value of the input when I ask ChatGPT about it. Also you can see the same issue from some user.
So I tried the modified javascript code so that it will use the same URL I used to connect it to my base.html, which extends all of my scripts to all of my html templates.
ph-address-selector.js
var my_handlers = {
// fill province
fill_provinces: function() {
var region_code = $(this).val();
var region_text = $(this).find("option:selected").text();
$('#region-text').val(region_text);
$('#province-text').val('');
$('#city-text').val('');
$('#barangay-text').val('');
let dropdown = $('#province');
dropdown.empty().append('<option selected="true" disabled>Choose State/Province</option>');
let city = $('#city');
city.empty().append('<option selected="true" disabled></option>');
let barangay = $('#barangay');
barangay.empty().append('<option selected="true" disabled></option>');
$.getJSON(provinceUrl, function(data) {
var result = data.filter(value => value.region_code == region_code);
result.sort((a, b) => a.province_name.localeCompare(b.province_name));
$.each(result, function(key, entry) {
dropdown.append($('<option></option>').attr('value', entry.province_code).text(entry.province_name));
});
});
},
// fill city
fill_cities: function() {
var province_code = $(this).val();
var province_text = $(this).find("option:selected").text();
$('#province-text').val(province_text);
$('#city-text').val('');
$('#barangay-text').val('');
let dropdown = $('#city');
dropdown.empty().append('<option selected="true" disabled>Choose city/municipality</option>');
let barangay = $('#barangay');
barangay.empty().append('<option selected="true" disabled></option>');
$.getJSON(cityUrl, function(data) {
var result = data.filter(value => value.province_code == province_code);
result.sort((a, b) => a.city_name.localeCompare(b.city_name));
$.each(result, function(key, entry) {
dropdown.append($('<option></option>').attr('value', entry.city_code).text(entry.city_name));
});
});
},
// fill barangay
fill_barangays: function() {
var city_code = $(this).val();
var city_text = $(this).find("option:selected").text();
$('#city-text').val(city_text);
$('#barangay-text').val('');
let dropdown = $('#barangay');
dropdown.empty().append('<option selected="true" disabled>Choose barangay</option>');
$.getJSON(barangayUrl, function(data) {
var result = data.filter(value => value.city_code == city_code);
result.sort((a, b) => a.brgy_name.localeCompare(b.brgy_name));
$.each(result, function(key, entry) {
dropdown.append($('<option></option>').attr('value', entry.brgy_code).text(entry.brgy_name));
});
});
},
onchange_barangay: function() {
var barangay_text = $(this).find("option:selected").text();
$('#barangay-text').val(barangay_text);
},
};
$(function() {
$('#region').on('change', my_handlers.fill_provinces);
$('#province').on('change', my_handlers.fill_cities);
$('#city').on('change', my_handlers.fill_barangays);
$('#barangay').on('change', my_handlers.onchange_barangay);
let dropdown = $('#region');
dropdown.empty().append('<option selected="true" disabled>Choose Region</option>');
$.getJSON(regionUrl, function(data) {
$.each(data, function(key, entry) {
dropdown.append($('<option></option>').attr('value', entry.region_code).text(entry.region_name));
});
});
});
base.html
<script>
var provinceUrl = "{% static 'ph-json/province.json' %}";
var cityUrl = "{% static 'ph-json/city.json' %}";
var barangayUrl = "{% static 'ph-json/barangay.json' %}";
var regionUrl = "{% static 'ph-json/region.json' %}";
</script>
<script src="{% static 'ph-json/ph-address-selector.js' %}"></script>
This is the value that I got when I checked the database