Codeigniter 3 ajax calculating from another input using jquery - php

Question

So the idea is to manipulate the value that is delivered by Ajax. This value should be divided by 20 and the result should be multiplied by the value from #nilai_hari input.
Here's my code
// trigger
<select class="form-control" id="id_anggota" name="id_anggota">
<option>-Pilih Karyawan</option>
<?php $no=1; foreach ($listAnggota as $l) {?>
<option value="<?php echo $l->id_anggota; ?>">
<?php echo $l->nama_lengkap; ?>
</option>
<?php $no++; }?>
</select>
// the effected
<select class="tunjangan_makan form-control total_tunjangan nominal" id="tunjangan_makan" name="tunjangan_makan"></select>
// another trigger
<input type="text" id="nilai_hari" name="nilai_hari" class="form-control">
And here's the script
$('#id_anggota').change(function() {
var id = $(this).val();
$.ajax({
url: "<?php echo base_url();?>hrd/penggajian/get_subpenggajian",
method: "POST",
data: {
id: id
},
async: false,
dataType: 'json',
success: function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
if (data[i].flat_tunjangan == 1) {
html += '<option value="' + data[i].tunjangan_makan + '">' + number_format(data[i].tunjangan_makan, 0, '', '.') + '</option>';
} else {
$('#tunjangan_makan', '#nilai_hari').keyup(function() {
var nilai_hari = $("#nilai_hari").val(),
makan = ((data[i].tunjangan_makan / 20) * nilai_hari)
html += '<option value="' + makan + '">' + number_format(makan, 0, '', '.') + '</option>';
})
}
}
$('.tunjangan_makan').html(html);
}
});
});
So, the value of the data in which flat_tunjangan is 0 must be calculated from another input. Thanks in advance

Answer 1

You are doing it wrong. You should call other input onkey event and call same ajax request again and remove that onkey event inside $('#id_anggota').change().
$('#id_anggota').change(function(){
var id=$(this).val();
// perform ajax and get data
var data = [{'flat_tunjangan': '1', 'tunjangan_makan': '20'}, {'flat_tunjangan': '0', 'tunjangan_makan': '30'}];
var html = '';
var i;
for(i=0; i<data.length; i++){
if(data[i].flat_tunjangan == 1){
html += '<option value="'+data[i].tunjangan_makan+'">'+data[i].tunjangan_makan+'</option>';
} else {
var nilai_hari = $("#nilai_hari").val(),
makan = ((data[i].tunjangan_makan/20)*nilai_hari)
if (makan != '') {
html += '<option value="'+makan+'">'+makan+'</option>';
}
}
}
$('.tunjangan_makan').html(html);
});
$("#nilai_hari").keyup(function(){
var nilai_hari = $(this).val();
// again do ajax reqeust and fetch data using selected tunjangan_makan id
var id = $('#id_anggota').val();
var data = [{'flat_tunjangan': '1', 'tunjangan_makan': '20'}, {'flat_tunjangan': '0', 'tunjangan_makan': '30'}];
var html = '';
var i;
for(i=0; i<data.length; i++){
if(data[i].flat_tunjangan == 1){
html += '<option value="'+data[i].tunjangan_makan+'">'+data[i].tunjangan_makan+'</option>';
} else {
var nilai_hari = $("#nilai_hari").val(),
makan = ((data[i].tunjangan_makan/20)*nilai_hari)
if (makan != '') {
html += '<option value="'+makan+'">'+makan+'</option>';
}
}
}
$('.tunjangan_makan').html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="id_anggota" name="id_anggota">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
</select>
<select class="tunjangan_makan form-control total_tunjangan nominal" id="tunjangan_makan" name="tunjangan_makan"></select>
<input type="text" id="nilai_hari" name="nilai_hari" class="form-control">