Pada artikel kali ini admin share aplikasi menghitung nilai dari checkbox dengan menggunakan javascript, dengan menggunakan javascript kita bisa menjumlahkan nilai yang ada di textbox tanpa harus merefresh terlebih dahulu, dimana kita ketahui javascript merupakan client scrpting ,, haha.. maksudnya script yang berjalan disisi client,, server tentu tidak terbebani dan tidak terhubung,,
Berikut contoh Menghitung nilai di checkbox otomatis dengan javascript tanpa menggunakan tombol submit / sejenisnya
masalah perhitungan total,
ane udah coba cari dmna yg salah tpi benar2 stuck, ga tau letak kesalahannya...
Code:
<HEAD><TITLE>Megi Fernanda - 1201093003</TITLE></HEAD>
<BODY>
[removed]
function hitungtotal()
{
var namaValid = /^[a-zA-Z]+(([\'\,\.\-][a-zA-z])?[a-zA-Z]*)*$/;
var nama = (document.fform.inama.value);
var nomortelp = (document.fform.inomor.value);
var alamat = (document.fform.ialamat.value);
var tipekamar = document.nangningnung ('itipe');
var jumlahkamar = (document.fform.ijumlah.value);
var checkin = (document.fform.icheckin.value);
var checkout = (document.fform.icheckout.value);
var pesan = '';
if(nama == '') {
pesan = '-Nama tidak boleh kosong\n';
}
if(nama != '' && !nama.match(namavalid)) {
pesan += '-Nama Tidak Valid\n';
}
if (nomortelp == ''){
pesan += '-Nomor Telp Anda Harus Diisi\n';
}
if (isNaN(nomortelp)||parseFloat(nomortelp)<0){
pesan += '-Nomor Telp Harus Diisi Dengan Angka > 0\n';
}
if (alamat == ""){
pesan += '-Alamat Anda Harus Diisi\n';
}
if(tipekamar[0]. checked==false && tipekamar[1].checked==false && tipekamar[2].checked==false) {
pesan += '-Tipe Kamar Harus Dipilih\n';
}
if (jumlahkamar == ''){
pesan += '-Jumlah Kamar Yang Dipesan Harus Diisi\n';
}
if (isNaN(jumlahkamar)||parseFloat(jumlahkamar)<0){
pesan += '-Jumlah Kamar Harus Diisi Dengan Angka > 0\n';
}
if (checkin == ''){
pesan += '-Tanggal Check-In Anda Harus Diisi\n';
}
if (isNaN(checkin)||parseFloat(checkin)<0){
pesan += '-Tanggal Check-In Harus Diisi Dengan Angka > 0\n';
}
if (checkout == ''){
pesan += '-Tanggal Check-Out Anda Harus Diisi\n';
}
if (isNaN(checkout)||parseFloat(checkout)<0){
pesan += '-Tanggal Check-Out Harus Diisi Dengan Angka > 0\n';
}
if (pesan != '') {
alert('Maaf, Ada Kesalahan Pengisian Formulir : \n' +pesan);
return false;
}
else {
[b]var hk = 0.0;
var lamamenginap = 0.0;
var awal = 0.0;
var diskon = 0.0;
var totalbayar = 0.0;
if (tipekamar[0].checked==true)
{
hk =250000;
}
else if (tipekamar[1].checked==true) {
hk =350000;
}
else {
hk =600000;
}
lamamenginap = parseFloat(checkout)-parseFloat(checkin);
awal = hk*parseFloat(lamamenginap);
if (lamamenginap>5) {
diskon = 0.10*awal;
}
else {
diskon = 0.0;
}
totalbayar = awal-diskon;
document.fform.oharga.value=eval(hk);
document.fform.olama.value=eval(lamamenginap);
document.fform.oawal.value=eval(awal);
document.fform.odiskon.value=eval(diskon);
document.fform.ototal.value=eval(totalbayar);
}
}[/b]
[removed]
<FORM NAME ="fform">
<table border="1" align="center"width="70%">
<tr>
<td width="100%" colspan="2"><H2 ALIGN="center">Hotel Nyaman Sentosa</H2></td>
</tr>
<tr>
<td width="100%" colspan="2">
<h3 align="center">Harga Sewa Kamar Per Malam</h3>
<h4 align="center">Standar = 250000 ; Superior = 350000 ; Presidential = 600000</h4>
</td>
</tr>
<tr>
<td width="70%">
<table border="0" align="center">
<tr>
<td>Nama : </td>
<td><input type="text" size="20" name="inama"> </td>
</tr>
<tr>
<td>Nomor Telp : </td>
<td><input type="text" size="20" name="inomor"> </td>
</tr>
<tr>
<td>Alamat :</td>
<td><textarea name='ialamat' rows='3' cols='20'></textarea></td>
</tr>
<tr>
<td>Tipe Kamar :</td>
<td><input type="radio" name="itipe" value="standar"> Standar
<input type="radio" name="itipe" value="superior"> Superior
<input type="radio" name="itipe" value="presidential"> Presidential</td>
</tr>
<tr>
<td>Jumlah Kamar : </td>
<td><input type="text" size="10" name="ijumlah"> </td>
</tr>
<tr>
<td>Check-In :</td>
<td><input type="text" size="20" name="icheckin"> </td>
<td>Check-Out :</td>
<td><input type="text" size="20" name="icheckout"> </td>
</tr>
</table>
</td>
<td width="50%">
<table border="0" align="center">
<tr>
<td>Harga Permalam :</td>
<td><input type="text" size="20" name="oharga"> </td>
</tr>
<tr>
<td>Lama Menginap :</td>
<td><input type="text" size="20" name="olama"> </td>
</tr>
<tr>
<td>Total Awal :</td>
<td><input type="text" size="20" name="oawal"> </td>
</tr>
<tr>
<td>Diskon :</td>
<td><input type="text" size="20" name="odiskon"> </td>
</tr>
<tr>
<td>Total Bayar :</td>
<td><input type="text" size="20" name="ototal"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<center>
<INPUT TYPE="button" value="Hitung">
<INPUT TYPE="reset" value="Reset">
</center>
</td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
nah yg ane bold itu kira2 dmn ya salahnya
trus document.nangningnung apaan coba
tombol submitnya gak berguna gan? functionnya gak dipanggil? buat apa tuh javascript bejibun dibuatin
Code:
[B][size="2"]<INPUT TYPE="button" value="Hitung" [color=red][B]on[/B][B]click="hitungtotal[/B][B]()[/B]">[/color][/size][/B]nih gan
Code:
[B][size="2"]<HTML><HEAD>
<TITLE>Megi Fernanda - 1201093003</TITLE>
</HEAD>
<BODY>
[B]<[/B][B]script type="text/javascript"[/B][B]>[/B]
function hitungtotal() {
var namavalid = /^[a-zA-Z]+(([\'\,\.\-][a-zA-z])?[a-zA-Z]*)*$/;
var nama = (document.fform.inama.value);
var nomortelp = (document.fform.inomor.value);
var alamat = (document.fform.ialamat.value);
var tipekamar = document.get[B]E[/B]lementsByName('itipe');
var jumlahkamar = (document.fform.ijumlah.value);
var checkin = (document.fform.icheckin.value);
var checkout = (document.fform.icheckout.value);
var pesan = '';
if (nama == '') {
pesan += '-Nama tidak boleh kosong\n';
}
if (nama != '' && !nama.match(namavalid)) {
pesan += '-Nama Tidak Valid\n';
}
if (nomortelp == '') {
pesan += '-Nomor Telp Anda Harus Diisi\n';
}
if (isNaN(nomortelp) || parseFloat(nomortelp) < 0) {
pesan += '-Nomor Telp Harus Diisi Dengan Angka > 0\n';
}
if (alamat == '') {
pesan += '-Alamat Anda Harus Diisi\n';
}
if (tipekamar[0].checked == false && tipekamar[1].checked == false && tipekamar[2].checked == false) {
pesan += '-Tipe Kamar Harus Dipilih\n';
}
if (jumlahkamar == '') {
pesan += '-Jumlah Kamar Yang Dipesan Harus Diisi\n';
}
if (isNaN(jumlahkamar) || parseFloat(jumlahkamar) < 0) {
pesan += '-Jumlah Kamar Harus Diisi Dengan Angka > 0\n';
}
if (checkin == '') {
pesan += '-Tanggal Check-In Anda Harus Diisi\n';
}
if (isNaN(checkin) || parseFloat(checkin) < 0) {
pesan += '-Tanggal Check-In Harus Diisi Dengan Angka > 0\n';
}
if (checkout == '') {
pesan += '-Tanggal Check-Out Anda Harus Diisi\n';
}
if (isNaN(checkout) || parseFloat(checkout) < 0) {
pesan += '-Tanggal Check-Out Harus Diisi Dengan Angka > 0\n';
}
if (pesan != '') {
alert('Maaf, Ada Kesalahan Pengisian Formulir :\n' +pesan);
return false;
} else {
var hk = 0.0;
var lamamenginap = 0.0;
var awal = 0.0;
var diskon = 0.0;
var totalbayar = 0.0;
if (tipekamar[0].checked == true) {
hk = 250000;
} else if (tipekamar[1].checked == true) {
hk = 350000;
} else {
hk = 600000;
}
lamamenginap = parseFloat(checkout) - parseFloat(checkin);
awal = hk * parseFloat(lamamenginap);
if (lamamenginap > 5) {
diskon = 0.10 * awal;
} else {
diskon = 0.0;
}
totalbayar = awal - diskon;
document.fform.oharga.value = eval(hk);
document.fform.olama.value = eval(lamamenginap);
document.fform.oawal.value = eval(awal);
document.fform.odiskon.value = eval(diskon);
document.fform.ototal.value = eval(totalbayar);
}
}
[B]<[/B][B]/script[/B][B]>[/B]
<FORM NAME="fform">
<table border="1" align="center" width="70%">
<tr>
<td width="100%" colspan="2">
<H2 ALIGN="center">Hotel Nyaman Sentosa</H2>
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<h3 align="center">Harga Sewa Kamar Per Malam</h3>
<h4 align="center">Standar = 250000 ; Superior = 350000 ; Presidential = 600000</h4>
</td>
</tr>
<tr>
<td width="70%">
<table border="0" align="center">
<tr>
<td>
Nama :
</td>
<td>
<input type="text" size="20" name="inama">
</td>
</tr>
<tr>
<td>
Nomor Telp :
</td>
<td>
<input type="text" size="20" name="inomor">
</td>
</tr>
<tr>
<td>
Alamat :
</td>
<td>
<textarea name='ialamat' rows='3' cols='20'></textarea>
</td>
</tr>
<tr>
<td>
Tipe Kamar :
</td>
<td>
<input type="radio" name="itipe" value="standar">Standar
<input type="radio" name="itipe" value="superior">Superior
<input type="radio" name="itipe" value="presidential">Presidential
</td>
</tr>
<tr>
<td>
Jumlah Kamar :
</td>
<td>
<input type="text" size="10" name="ijumlah">
</td>
</tr>
<tr>
<td>
Check-In :
</td>
<td>
<input type="text" size="20" name="icheckin">
</td>
<td>
Check-Out :
</td>
<td>
<input type="text" size="20" name="icheckout">
</td>
</tr>
</table>
</td>
<td width="50%">
<table border="0" align="center">
<tr>
<td>
Harga Permalam :
</td>
<td>
<input type="text" size="20" name="oharga">
</td>
</tr>
<tr>
<td>
Lama Menginap :
</td>
<td>
<input type="text" size="20" name="olama">
</td>
</tr>
<tr>
<td>
Total Awal :
</td>
<td>
<input type="text" size="20" name="oawal">
</td>
</tr>
<tr>
<td>
Diskon :
</td>
<td>
<input type="text" size="20" name="odiskon">
</td>
</tr>
<tr>
<td>
Total Bayar :
</td>
<td>
<input type="text" size="20" name="ototal">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<center>
<INPUT TYPE="button" value="Hitung" [B] title[/B][B]="hitungtotal()"[/B]>
<INPUT TYPE="reset" value="Reset">
</center>
</td>
</tr>
</table>
</FORM>
</BODY>
</HTML>[/size][/B]