Change poskod input interaction
- On unvailable postcode number teller typed, the daerah and negeri input becomes available. Allowing for the unvailable postcode to be registered to DB
This commit is contained in:
afiq.hamzah
Vendored
+1
-1
@@ -205,7 +205,7 @@ let original_photo_loader = document.querySelector("#photo-mykad").src;
|
||||
let mykad_modal = document.querySelector("#daftar_pelanggan_mykad_reader");
|
||||
let photo_container = mykad_modal.querySelector("#photo-mykad-container");
|
||||
|
||||
modal_form.querySelector("input[name='name']").value = data.OrgName;
|
||||
modal_form.querySelector("textarea[name='name']").value = data.OrgName;
|
||||
modal_form.querySelector("input[name='noic']").value = getMyKadNumberWithoutHypens(data.IDNum);
|
||||
modal_form.querySelector("input[name='tarikh_lahir']").value = getFormattedDateOfBirth(data.BirthDate);
|
||||
modal_form.querySelector("input[name='negeri_lahir']").value = data.BirthPlace;
|
||||
|
||||
Vendored
@@ -6,6 +6,15 @@
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single {
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
@@ -121,13 +130,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">Ahli</div>
|
||||
<div class="col-md-8">
|
||||
<select class="form-control" name="kumpulan_sahabat" id="kumpulan_sahabat">
|
||||
<option value="0">Tidak</option>
|
||||
<option value="1">Kumpulan PKINK</option>
|
||||
<option value="2">Sahabat</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@@ -137,15 +140,18 @@
|
||||
<div class="col-md-4">Poskod</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="poskod" id="poskod" autocomplete="off" placeholder="Poskod"></div>
|
||||
<div class="col-md-4">Daerah</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" readonly autocomplete="off"></div>
|
||||
<div class="col-md-8" style="display: none;"><input class="form-control" type="text" name="daerah" id="daerah" autocomplete="off" readonly required></div>
|
||||
<div class="col-md-8">
|
||||
<select class="select2-daerah form-control" name="select-daerah" id="select-daerah" data-placeholder="Pilih daerah" style="width: 100%;" readonly disabled></select>
|
||||
</div>
|
||||
<div class="col-md-4">Negeri</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" readonly autocomplete="off"></div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" autocomplete="off" readonly required></div>
|
||||
<div class="col-md-4">Umur</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div>
|
||||
<div class="col-md-4">Bangsa</div>
|
||||
<div class="col-md-8">
|
||||
<select class="form-control" name="bangsa" id="bangsa">
|
||||
<option selected value="M">Melayu</option>
|
||||
<option value="M">Melayu</option>
|
||||
<option value="C">Cina</option>
|
||||
<option value="I">India</option>
|
||||
<option value="L">Lain-lain</option>
|
||||
@@ -219,7 +225,7 @@
|
||||
<div class="col-md-6">
|
||||
<div class="row form-group">
|
||||
<div class="col-md-4">Nama</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="name" id="name" autocomplete="off" placeholder="Nama" readonly></div>
|
||||
<div class="col-md-8"><textarea class="form-control" style="resize:none" name="name" id="name" autocomplete="off" placeholder="Nama" readonly></textarea></div>
|
||||
<div class="col-md-4">No KP</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="noic" id="noic" value="{{$noic ?? ''}}" readonly></div>
|
||||
<div class="col-md-4">Tarikh Lahir</div>
|
||||
@@ -267,13 +273,13 @@
|
||||
<div class="col-md-6">
|
||||
<div class="row form-group">
|
||||
<div class="col-md-4">Alamat</div>
|
||||
<div class="col-md-8"><textarea class="form-control" style="resize:none" name="alamat" id="alamat" cols="30" rows="3" placeholder="Alamat Pelanggan" readonly></textarea></div>
|
||||
<div class="col-md-8"><textarea class="form-control" style="resize:none" name="alamat" id="alamat" cols="30" rows="3" placeholder="Alamat Pelanggan"></textarea></div>
|
||||
<div class="col-md-4">Poskod</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="poskod" id="poskod" autocomplete="off" placeholder="Poskod" readonly></div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="poskod" id="poskod" autocomplete="off" placeholder="Poskod"></div>
|
||||
<div class="col-md-4">Daerah</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" readonly autocomplete="off" readonly></div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" readonly autocomplete="off" required></div>
|
||||
<div class="col-md-4">Negeri</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" readonly autocomplete="off" readonly></div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" readonly autocomplete="off" required></div>
|
||||
<div class="col-md-4">Umur</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div>
|
||||
<div class="col-md-4">Bangsa</div>
|
||||
@@ -393,9 +399,9 @@
|
||||
<div class="col-md-4">Poskod</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="poskod" id="passport_poskod" autocomplete="off" placeholder="Poskod"></div>
|
||||
<div class="col-md-4">Daerah</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="passport_daerah" readonly autocomplete="off"></div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="passport_daerah" autocomplete="off" readonly></div>
|
||||
<div class="col-md-4">Negeri</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="passport_negeri" readonly autocomplete="off"></div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="passport_negeri" autocomplete="off" readonly ></div>
|
||||
<div class="col-md-4">Umur</div>
|
||||
<div class="col-md-8"><input class="form-control" type="text" name="age" id="passport_age" readonly></div>
|
||||
<div class="col-md-4">Bangsa</div>
|
||||
@@ -548,6 +554,81 @@
|
||||
reader.readAsDataURL(this.files[0]);
|
||||
});
|
||||
|
||||
|
||||
let handlePoskodDetail_NotFound = (modal) => {
|
||||
let input_negeri = modal.querySelector('input#negeri');
|
||||
let input_daerah = modal.querySelector('input#daerah');
|
||||
let select_daerah = modal.querySelector('select#select-daerah');
|
||||
|
||||
input_daerah.closest('div.col-md-8').style.display = 'none' ;
|
||||
input_daerah.disabled = 'true';
|
||||
|
||||
select_daerah.closest('div.col-md-8').style.display = 'block' ;
|
||||
select_daerah.disabled = false;
|
||||
select_daerah.readOnly = false;
|
||||
|
||||
input_negeri.value = '';
|
||||
input_negeri.placeholder = '';
|
||||
|
||||
|
||||
let getAllNegeri = () => {
|
||||
return fetch(api_url+'/api/daerah');
|
||||
};
|
||||
|
||||
|
||||
let data_daerah = getAllNegeri().then(response => response.json())
|
||||
.then(x => x.map(y => {
|
||||
return {
|
||||
"id": y.koddaerah,
|
||||
"text": y.namadaerah + ' - ' + y.negeri.negeri,
|
||||
}
|
||||
})).then(x => {
|
||||
$('#select-daerah').select2({
|
||||
placeholder: "Sila pilih daerah pelanggan",
|
||||
dropdownParent: $('#daftar_pelanggan'),
|
||||
closeOnSelect: true,
|
||||
data: x,
|
||||
});
|
||||
}).then(() => $('#select-daerah').val('').trigger('change'));
|
||||
|
||||
};
|
||||
|
||||
$('select.select2-daerah').on('select2:select', function (e) {
|
||||
|
||||
let caller = e.target || e.srcElement;
|
||||
let modal = caller.closest('div.modal.fade');
|
||||
|
||||
let selected_daerah = e.params.data;
|
||||
|
||||
let getDaerahDetail = (koddaerah) => {
|
||||
return fetch(api_url+'/api/daerah/'+koddaerah)
|
||||
.then(response => response.json())
|
||||
.then(x => fetch(api_url+'/api/negeri/'+x.kodnegeri))
|
||||
.then(response => response.json())
|
||||
};
|
||||
|
||||
let input_negeri = modal.querySelector('input#negeri');
|
||||
|
||||
getDaerahDetail(selected_daerah.id).then(x => input_negeri.value = x.negeri);
|
||||
});
|
||||
|
||||
let handlePoskodDetail_Found = (modal) => {
|
||||
let input_negeri = modal.querySelector('input#negeri');
|
||||
let input_daerah = modal.querySelector('input#daerah');
|
||||
let select_daerah = modal.querySelector('select#select-daerah');
|
||||
|
||||
select_daerah.closest('div.col-md-8').style.display = 'none' ;
|
||||
select_daerah.disabled = 'true';
|
||||
|
||||
input_daerah.closest('div.col-md-8').style.display = 'block' ;
|
||||
input_daerah.disabled = false;
|
||||
|
||||
input_negeri.readOnly = true;
|
||||
input_negeri.placeholder = '';
|
||||
input_daerah.readOnly = true;
|
||||
input_daerah.placeholder = '';
|
||||
};
|
||||
|
||||
$('#poskod').change(function(){
|
||||
var poskod = this.value;
|
||||
|
||||
@@ -555,6 +636,14 @@
|
||||
method:'GET',
|
||||
url:api_url+'/api/poskod/'+poskod,
|
||||
success:function(poskod_detail){
|
||||
|
||||
let parent_modal = document.querySelector('#daftar_pelanggan');
|
||||
|
||||
if(Object.keys(poskod_detail).length === 0){
|
||||
handlePoskodDetail_NotFound(parent_modal);
|
||||
return;
|
||||
}
|
||||
|
||||
var koddaerah = poskod_detail['koddaerah'];
|
||||
var kodnegeri = poskod_detail['kodnegeri'];
|
||||
$.ajax({
|
||||
@@ -571,10 +660,69 @@
|
||||
$('#daerah').val(daerah['namadaerah']);
|
||||
}
|
||||
});
|
||||
|
||||
handlePoskodDetail_Found(parent_modal);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#daftar_pelanggan_mykad_reader input#poskod').change(function(){
|
||||
var poskod = this.value;
|
||||
|
||||
$.ajax({
|
||||
method:'GET',
|
||||
url:api_url+'/api/poskod/'+poskod,
|
||||
success:function(poskod_detail){
|
||||
|
||||
let parent_modal = document.querySelector('#daftar_pelanggan_mykad_reader');
|
||||
|
||||
if(Object.keys(poskod_detail).length === 0){
|
||||
handlePoskodDetail_NotFound(parent_modal);
|
||||
return;
|
||||
}
|
||||
|
||||
var koddaerah = poskod_detail['koddaerah'];
|
||||
var kodnegeri = poskod_detail['kodnegeri'];
|
||||
$.ajax({
|
||||
url:api_url+'/api/negeri/'+kodnegeri,
|
||||
method:'GET',
|
||||
success:function(negeri){
|
||||
$('#daftar_pelanggan_mykad_reader #negeri').val(negeri['negeri']);
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url:api_url+'/api/daerah/'+koddaerah,
|
||||
method:'GET',
|
||||
success:function(daerah){
|
||||
$('#daftar_pelanggan_mykad_reader #daerah').val(daerah['namadaerah']);
|
||||
}
|
||||
});
|
||||
|
||||
handlePoskodDetail_Found(parent_modal);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$('#daftar_pelanggan_mykad_reader textarea#alamat').change(function(){
|
||||
let modal = document.querySelector('#daftar_pelanggan_mykad_reader');
|
||||
let input_poskod = modal.querySelector('input#poskod');
|
||||
let input_daerah = modal.querySelector('input#daerah');
|
||||
let input_negeri = modal.querySelector('input#negeri');
|
||||
|
||||
input_negeri.value = '';
|
||||
|
||||
input_daerah.value = '';
|
||||
|
||||
input_poskod.value = '';
|
||||
|
||||
input_poskod.readOnly = false;
|
||||
input_daerah.readOnly = true;
|
||||
input_negeri.readOnly = true;
|
||||
|
||||
input_poskod.focus();
|
||||
});
|
||||
|
||||
$('#passport_poskod').change(function(){
|
||||
var poskod = this.value;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user