Input Field Hitung Otomatis Pada PHP - merupakan sebuah tutorial yang akan membahas bagaimana cara membuat sebuah form penginputan field dengan menjumlahkan secara otomatis. Banyak contoh kasus dalam halaman form website yang di dalamnya terdapat form penginputan yang berisi angka dengan menjumlahkan secara otomatis. Beberapa contoh diantaranya yaitu form penginputan inventaris barang, transaksi pembayaran pembelian barang dan masih banyak lagi contoh kasus lainnya.
Cara kerja input field hitung otomatis seperti contoh gambar diatas yaitu (Input field: Harga Barang, Jumlah Barang, dan Potongan Harga). (Hitung otomatis: Jumlah, terisi secara otomatis).
Dalam pembuatan form inputan dengan penjumlahan otomatis, yang perlu dilakukan yaitu penambahan javascript pada form penginputan tersebut. Javascript inilah yang berfungsi untuk menghitung otomatis penjumlahan angka pada form. Adapun javascript yang digunakan silahkan lihat pada script berikut<script>
function startCalc(){
interval = setInterval("calc()",1);}
function calc(){
one = document.autoSumForm.harga.value;
two = document.autoSumForm.jumlah.value;
three = document.autoSumForm.diskon.value;
document.autoSumForm.total.value = (one * 1) * (two * 1) - (three * 1);}
function stopCalc(){
clearInterval(interval);}
</script>**) Keterangan:
- Script background kuning berfungsi sebagai penginputan harga
- Script background hijau berfugsi sebagai penginputan jumlah
- Script background biru langit berfungsi sebagai penginputan potongan harga
- Script background ungu berfungsi sebagai penjumlahan otomatis
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kodingbuton.com</title>
</head>
<body bgcolor="#33CCCC">
<h2><center><font color="#FFFFFF"> Tutorial Input Field Hitung Otomatis Pada PHP</font></center></h2>
<h4><center><font color="#FFFFFF"> kodingbuton.com</font></center></h4><br>
<form name="autoSumForm">
<table bgcolor="#F09" align="center">
<tr>
<td><b>Harga Barang</b> </td>
<td><input type='text' name='harga' onFocus="startCalc();" onBlur="stopCalc();" /></td>
</tr>
<tr>
<td><b>Jumlah</b> </td>
<td><input type='text' name='jumlah' onFocus="startCalc();" onBlur="stopCalc();" /></td>
</tr>
<tr>
<td><b>Potongan Harga</b> </td>
<td><input type='text' name="diskon" onFocus="startCalc();" onBlur="stopCalc();" /></td>
</tr>
<tr>
<td><b>Total Bayar</b> </td>
<td><input type="text" name="total" value="0" readonly> </td>
</tr>
</table>
</form>
<script>
function startCalc(){
interval = setInterval("calc()",1);}
function calc(){
one = document.autoSumForm.harga.value;
two = document.autoSumForm.jumlah.value;
three = document.autoSumForm.diskon.value;
document.autoSumForm.total.value = (one * 1) * (two * 1) - (three * 1);}
function stopCalc(){
clearInterval(interval);}
</script>
</body>
</html>
**) Keterangan:
- Script background hijau (autoSumForm) adalah form name atau nama formnya yang berfungsi untuk mencocokan script penjumlahan pada javascript;
- Script background ungu (onFocus="startCalc();" onBlur="stopCalc();") adalah script tambahan field inputan;
- Script background abu-abu adalah javascript yang berfungsi sebagai eksekutor penjumlahan otomatis.
**) Catatan:
- Jika teman-teman ingin membuat form dengan jumlah penginputan field lebih dari tiga seperti contoh diatas, hal yang perlu dilakukan yaitu menambahkan four, five, … dan seterusnya (silahkan sesuaikan kebutuhan teman-teman).
Demikian tutorial Input Field Hitung Otomatis Pada PHP yang dapat saya bagikan, semoga bermanfaat dan memberi inspirasi untuk bahan pembelajaran ataupun proses pembuatan source code form penginputan website yang dikerjakan...!
Apabila ada source code yang tidak berjalan, error atau tidak sesuai,, silahkan isi kolom komentar pada bagian bawah tutorial ini...!.
Mantap mas tutorialnya
ReplyDeletePost a Comment