Skip to content

Commit 68e3777

Browse files
wilfredpinewilfredpine
committed
new Readme
1 parent d57cb87 commit 68e3777

2 files changed

Lines changed: 27 additions & 230 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 210 deletions
Original file line numberDiff line numberDiff line change
@@ -88,216 +88,10 @@ Load Province Function
8888

8989
### Full Code
9090

91-
```html
92-
<!DOCTYPE html>
93-
<html>
94-
<head>
95-
<meta charset="UTF-8">
96-
<title>Address Selector - Philippines</title>
97-
<!--Bootstrap-->
98-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
99-
<!--JQuery-->
100-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
101-
</head>
102-
<body class="p-5">
103-
</form method="POST" action="">
104-
<div class="col-sm-6">
105-
<h3>Address Selector - Philippines</h3>
106-
</div>
107-
<hr>
108-
<div class="col-sm-6 mb-3">
109-
<label class="form-label">Region *</label>
110-
<select name="region" class="form-control form-control-md" id="region"></select>
111-
<input type="hidden" class="form-control form-control-md" name="region_text" id="region-text" required>
112-
</div>
113-
<div class="col-sm-6 mb-3">
114-
<label class="form-label">Province *</label>
115-
<select name="province" class="form-control form-control-md" id="province"></select>
116-
<input type="hidden" class="form-control form-control-md" name="province_text" id="province-text" required>
117-
</div>
118-
<div class="col-sm-6 mb-3">
119-
<label class="form-label">City / Municipality *</label>
120-
<select name="city" class="form-control form-control-md" id="city"></select>
121-
<input type="hidden" class="form-control form-control-md" name="city_text" id="city-text" required>
122-
</div>
123-
<div class="col-sm-6 mb-3">
124-
<label class="form-label">Barangay *</label>
125-
<select name="barangay" class="form-control form-control-md" id="barangay"></select>
126-
<input type="hidden" class="form-control form-control-md" name="barangay_text" id="barangay-text" required>
127-
</div>
128-
<div class="col-md-6 mb-3">
129-
<label for="street-text" class="form-label">Street (Optional)</label>
130-
<input type="text" class="form-control form-control-md" name="street_text" id="street-text">
131-
</div>
132-
<div class="col-md-6">
133-
<input type="submit" class="btn btn-success" name="submit">
134-
</div>
135-
</form>
136-
</body>
137-
</html>
138-
139-
<script>
140-
141-
var my_handlers = {
142-
// fill province
143-
fill_provinces: function () {
144-
//selected region
145-
var region_code = $(this).val();
146-
147-
// set selected text to input
148-
var region_text = $(this).find("option:selected").text();
149-
let region_input = $('#region-text');
150-
region_input.val(region_text);
151-
//clear province & city & barangay input
152-
$('#province-text').val('');
153-
$('#city-text').val('');
154-
$('#barangay-text').val('');
155-
156-
//province
157-
let dropdown = $('#province');
158-
dropdown.empty();
159-
dropdown.append('<option selected="true" disabled>Choose State/Province</option>');
160-
dropdown.prop('selectedIndex', 0);
161-
162-
//city
163-
let city = $('#city');
164-
city.empty();
165-
city.append('<option selected="true" disabled></option>');
166-
city.prop('selectedIndex', 0);
167-
168-
//barangay
169-
let barangay = $('#barangay');
170-
barangay.empty();
171-
barangay.append('<option selected="true" disabled></option>');
172-
barangay.prop('selectedIndex', 0);
173-
174-
// filter & fill
175-
var url = 'ph-json/province.json';
176-
$.getJSON(url, function (data) {
177-
var result = data.filter(function (value) {
178-
return value.region_code == region_code;
179-
});
180-
181-
result.sort(function (a, b) {
182-
return a.province_name.localeCompare(b.province_name);
183-
});
184-
185-
$.each(result, function (key, entry) {
186-
dropdown.append($('<option></option>').attr('value', entry.province_code).text(entry.province_name));
187-
})
188-
189-
});
190-
},
191-
// fill city
192-
fill_cities: function () {
193-
//selected province
194-
var province_code = $(this).val();
195-
196-
// set selected text to input
197-
var province_text = $(this).find("option:selected").text();
198-
let province_input = $('#province-text');
199-
province_input.val(province_text);
200-
//clear city & barangay input
201-
$('#city-text').val('');
202-
$('#barangay-text').val('');
203-
204-
//city
205-
let dropdown = $('#city');
206-
dropdown.empty();
207-
dropdown.append('<option selected="true" disabled>Choose city/municipality</option>');
208-
dropdown.prop('selectedIndex', 0);
209-
210-
//barangay
211-
let barangay = $('#barangay');
212-
barangay.empty();
213-
barangay.append('<option selected="true" disabled></option>');
214-
barangay.prop('selectedIndex', 0);
215-
216-
// filter & fill
217-
var url = 'ph-json/city.json';
218-
$.getJSON(url, function (data) {
219-
var result = data.filter(function (value) {
220-
return value.province_code == province_code;
221-
});
222-
223-
result.sort(function (a, b) {
224-
return a.city_name.localeCompare(b.city_name);
225-
});
91+
#### HTML
92+
https://github.com/redmalmon/philippine-address-selector/blob/main/index.html
22693

227-
$.each(result, function (key, entry) {
228-
dropdown.append($('<option></option>').attr('value', entry.city_code).text(entry.city_name));
229-
})
94+
#### JS
95+
https://github.com/redmalmon/philippine-address-selector/blob/main/ph-address-selector.js
23096

231-
});
232-
},
233-
// fill barangay
234-
fill_barangays: function () {
235-
// selected barangay
236-
var city_code = $(this).val();
23797

238-
// set selected text to input
239-
var city_text = $(this).find("option:selected").text();
240-
let city_input = $('#city-text');
241-
city_input.val(city_text);
242-
//clear barangay input
243-
$('#barangay-text').val('');
244-
245-
// barangay
246-
let dropdown = $('#barangay');
247-
dropdown.empty();
248-
dropdown.append('<option selected="true" disabled>Choose barangay</option>');
249-
dropdown.prop('selectedIndex', 0);
250-
251-
// filter & Fill
252-
var url = 'ph-json/barangay.json';
253-
$.getJSON(url, function (data) {
254-
var result = data.filter(function (value) {
255-
return value.city_code == city_code;
256-
});
257-
258-
result.sort(function (a, b) {
259-
return a.brgy_name.localeCompare(b.brgy_name);
260-
});
261-
262-
$.each(result, function (key, entry) {
263-
dropdown.append($('<option></option>').attr('value', entry.brgy_code).text(entry.brgy_name));
264-
})
265-
266-
});
267-
},
268-
269-
onchange_barangay: function () {
270-
// set selected text to input
271-
var barangay_text = $(this).find("option:selected").text();
272-
let barangay_input = $('#barangay-text');
273-
barangay_input.val(barangay_text);
274-
},
275-
276-
};
277-
278-
279-
$(function () {
280-
// events
281-
$('#region').on('change', my_handlers.fill_provinces);
282-
$('#province').on('change', my_handlers.fill_cities);
283-
$('#city').on('change', my_handlers.fill_barangays);
284-
$('#barangay').on('change', my_handlers.onchange_barangay);
285-
286-
// load region
287-
let dropdown = $('#region');
288-
dropdown.empty();
289-
dropdown.append('<option selected="true" disabled>Choose Region</option>');
290-
dropdown.prop('selectedIndex', 0);
291-
const url = 'ph-json/region.json';
292-
// Populate dropdown with list of regions
293-
$.getJSON(url, function (data) {
294-
$.each(data, function (key, entry) {
295-
dropdown.append($('<option></option>').attr('value', entry.region_code).text(entry.region_name));
296-
})
297-
});
298-
299-
});
300-
301-
302-
</script>
303-
```

‎ph-address-selector.js‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
/**
2+
* https://github.com/redmalmon/philippine-address-selector
3+
*/
14

25
var my_handlers = {
36
// fill province
4-
fill_provinces: function () {
7+
fill_provinces: function() {
58
//selected region
69
var region_code = $(this).val();
710

@@ -34,23 +37,23 @@ var my_handlers = {
3437

3538
// filter & fill
3639
var url = 'ph-json/province.json';
37-
$.getJSON(url, function (data) {
38-
var result = data.filter(function (value) {
40+
$.getJSON(url, function(data) {
41+
var result = data.filter(function(value) {
3942
return value.region_code == region_code;
4043
});
4144

42-
result.sort(function (a, b) {
45+
result.sort(function(a, b) {
4346
return a.province_name.localeCompare(b.province_name);
4447
});
4548

46-
$.each(result, function (key, entry) {
49+
$.each(result, function(key, entry) {
4750
dropdown.append($('<option></option>').attr('value', entry.province_code).text(entry.province_name));
4851
})
4952

5053
});
5154
},
5255
// fill city
53-
fill_cities: function () {
56+
fill_cities: function() {
5457
//selected province
5558
var province_code = $(this).val();
5659

@@ -76,23 +79,23 @@ var my_handlers = {
7679

7780
// filter & fill
7881
var url = 'ph-json/city.json';
79-
$.getJSON(url, function (data) {
80-
var result = data.filter(function (value) {
82+
$.getJSON(url, function(data) {
83+
var result = data.filter(function(value) {
8184
return value.province_code == province_code;
8285
});
8386

84-
result.sort(function (a, b) {
87+
result.sort(function(a, b) {
8588
return a.city_name.localeCompare(b.city_name);
8689
});
8790

88-
$.each(result, function (key, entry) {
91+
$.each(result, function(key, entry) {
8992
dropdown.append($('<option></option>').attr('value', entry.city_code).text(entry.city_name));
9093
})
9194

9295
});
9396
},
9497
// fill barangay
95-
fill_barangays: function () {
98+
fill_barangays: function() {
9699
// selected barangay
97100
var city_code = $(this).val();
98101

@@ -111,23 +114,23 @@ var my_handlers = {
111114

112115
// filter & Fill
113116
var url = 'ph-json/barangay.json';
114-
$.getJSON(url, function (data) {
115-
var result = data.filter(function (value) {
117+
$.getJSON(url, function(data) {
118+
var result = data.filter(function(value) {
116119
return value.city_code == city_code;
117120
});
118121

119-
result.sort(function (a, b) {
122+
result.sort(function(a, b) {
120123
return a.brgy_name.localeCompare(b.brgy_name);
121124
});
122125

123-
$.each(result, function (key, entry) {
126+
$.each(result, function(key, entry) {
124127
dropdown.append($('<option></option>').attr('value', entry.brgy_code).text(entry.brgy_name));
125128
})
126129

127130
});
128131
},
129132

130-
onchange_barangay: function () {
133+
onchange_barangay: function() {
131134
// set selected text to input
132135
var barangay_text = $(this).find("option:selected").text();
133136
let barangay_input = $('#barangay-text');
@@ -137,7 +140,7 @@ var my_handlers = {
137140
};
138141

139142

140-
$(function () {
143+
$(function() {
141144
// events
142145
$('#region').on('change', my_handlers.fill_provinces);
143146
$('#province').on('change', my_handlers.fill_cities);
@@ -151,10 +154,10 @@ $(function () {
151154
dropdown.prop('selectedIndex', 0);
152155
const url = 'ph-json/region.json';
153156
// Populate dropdown with list of regions
154-
$.getJSON(url, function (data) {
155-
$.each(data, function (key, entry) {
157+
$.getJSON(url, function(data) {
158+
$.each(data, function(key, entry) {
156159
dropdown.append($('<option></option>').attr('value', entry.region_code).text(entry.region_name));
157160
})
158161
});
159162

160-
});
163+
});

0 commit comments

Comments
 (0)