Postingan lainnya
Perhitungan tidak berkerja
Permisi gan, mau tanya.
saya memiliki tampilan program seperti ini
saya ingin melakukan perhitungan total bayar dengan jquery. masalahnya perhitungannya cuma berkerja pada paket yang pertama, sedangkan pada paket 2 dan paket 3 perhitungannya tidak berjalan.
tampilan pada paket 2 dan paket 3 seperti ini
code yang saya gunakan
<div class="form-group">
<label>Harga</label>
<input type="text" class="harga form-control" id="harga" value="<?php echo $data['harga']?>" readonly>
</div>
<div class="form-group">
<label>Jumlah Orang</label>
<input type="number" name="jml_org" id="jml_org" class="jml_org form-control" min="20" max="60">
</div>
<div class="form-group">
<label>Total Bayar</label>
<input type="text" class="total_bayar form-control" id="total_bayar" readonly>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="refresh()">Batal</button>
<input type="submit" name="kd_booking" class="btn btn-primary" value="simpan">
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(function() {
$(".tgl_wisata" ).datepicker({
dateFormat : 'yy/mm/dd',
changeMonth: true,
changeYear: true,
minDate: "today"
});
});
$(document).ready(function(){
$('.jml_org').keyup(function(){
var harga = $('.harga').val();
var jml_org = $('.jml_org').val();
var total = harga * jml_org;
$('.total_bayar').val(total);
});
});
function refresh(){
//mengosongkan form
document.getElementById("jml_org").value="";
document.getElementById("total_bayar").value="";
}
</script>
4 Jawaban:
Semoga cara saya ini membantu
<pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src='jquery.js'></script> <title>Perhitungan</title> <style> .form select{ padding-left: 2%; padding-right: 2%; height: 35px; border: 1px solid #DFD3D3; border-radius: 4px; display: block; width: 34%; } .form input{ padding-left: 2%; padding-right: 2%; height: 35px; border-radius: 2px; border: 1px solid #DFD3D3; display: block; margin-top: 2%; width: 30%; } </style> </head> <body> <form action='' method="get" class='form'> <select id='select'> <option>PADI Anak</option> <option>PADI Remaja</option> <option>PADI Korporat</option> </select> <input type='text' id='jumlah-orang' placeholder="Jumlah Orang"/> <input type='text' id='total' placeholder="Total Bayar"/> </form> <script> $(document).ready(function(){ $('#jumlah-orang').on('keyup', function(){ const paket = $('#select').val(); switch(paket){ case 'PADI Anak': const totalA = 115000 * $('#jumlah-orang').val(); $('#total').val(totalA); break; // PADI REMAJA case 'PADI Remaja': const totalB = 135000 * $('#jumlah-orang').val(); $('#total').val(totalB); break; case 'PADI Korporat': const totalC = 160000 * $('#jumlah-orang').val(); $('#total').val(totalC); break; default: alert('Err'); break; } });
$('#select').on('change', function(){
if($('#jumlah-orang').val()){
const jenisPaket = $('#select').val();
switch(jenisPaket){
case 'PADI Anak':
const hargaA = 115000 * $('#jumlah-orang').val();
$('#total').val(hargaA);
break;
case 'PADI Remaja':
const hargaB = 135000 * $('#jumlah-orang').val();
$('#total').val(hargaB);
break;
case 'PADI Korporat':
const hargaC = 160000 * $('#jumlah-orang').val();
$('#total').val(hargaC);
break;
default:
alert('Err');
break;
}
}else{
alert('Masukan jumlah orang terlebih dahulu');
}
})
});
&lt;/script&gt;
</body> </html> </pre>
sekedar menambahkan, lebih baik pakai fungsi
<pre>
<script>
$(document).ready(function(){
function hitung(){
const paket = $('#select').val();
switch(paket){
case 'PADI Anak':
const totalA = 115000 * $('#jumlah-orang').val();
$('#total').val(totalA);
break;
case 'PADI Remaja':
const totalB = 135000 * $('#jumlah-orang').val();
$('#total').val(totalB);
break;
case 'PADI Korporat':
const totalC = 160000 * $('#jumlah-orang').val();
$('#total').val(totalC);
break;
default:
alert('Err');
break;
}
}
$('#jumlah-orang').on('keyup', function(){
hitung();
});
$('#select').on('change', function(){
if($('#jumlah-orang').val()){
hitung();
}else{
alert('Masukan jumlah orang terlebih dahulu');
}
})
}); </script> </pre>
maaf mas @mrxxx41 dan mas @odhier. paketnya disini kan ga pasti, maksudnya saya memiliki banyak tempat. setiap tempat itu memiliki paket dengan harga yang berbeda. misal jakarta memiliki 3 paket (paket a hrg 20000, paket b harga 30000, paket c hrg 25000). bandung memiliki 2 paket (paket 1 hrg 150000, paket 2 hrg 500000). apakah dengan kasus seperti itu cara tersebut bisa di terapkan? mohon bantuannya
itu form input #harga nya berubah ga ketika select packet nya berubah? klo udah tinggal ambil dari input #harga nya
<pre>
$(document).ready(function(){
function hitung(){
const paket = $('#select').val();
switch(paket){
case 'PADI Anak':
const totalA = $('#harga').val() * $('#jumlah-orang').val();
$('#total').val(totalA);
break;
case 'PADI Remaja':
const totalB = $('#harga').val() * $('#jumlah-orang').val();
$('#total').val(totalB);
break;
case 'PADI Korporat':
const totalC = $('#harga').val() * $('#jumlah-orang').val();
$('#total').val(totalC);
break;
default:
alert('Err');
break;
}
}
$('#jumlah-orang').on('keyup', function(){
hitung();
});
$('#select').on('change', function(){
if($('#jumlah-orang').val()){
hitung();
}else{
alert('Masukan jumlah orang terlebih dahulu');
}
})
}); </pre>