Selasa, 03 Desember 2013

contoh javascript pembelian barang

hanya ingin berbagi....






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Event JavaScript</title>
<script language="javascript">

    var totBarang = 0;
    var totKey = 0;
    var totMouse = 0;
    var totPrint = 0;

    //hitung list
    function list(){
        if (document.form1.namaBarang.value==0){
            document.form1.jumBarang.value = null;
            document.form1.totBarang.value = null;
            document.form1.hargaBarang.value = null;
            totBarang=0;
        } else if (document.form1.jumBarang.value > 0){
            var hargabarang = document.form1.namaBarang.value;
            document.form1.hargaBarang.value = hargabarang;

            var jumBarang = document.form1.jumBarang.value;
            document.form1.totBarang.value = document.form1.namaBarang.value * jumBarang;
            totBarang = document.form1.totBarang.value;
        } else {
            var hargabarang = document.form1.namaBarang.value;
            document.form1.hargaBarang.value = hargabarang;
        }
        updatetotal();
    }

    function hargabarang(){
        if (document.form1.namaBarang.value==0){
            document.form1.jumBarang.value = null;
            document.form1.totBarang.value = null;
            totBarang = 0;
        } else {
            var jumBarang = document.form1.jumBarang.value;
            document.form1.totBarang.value = document.form1.namaBarang.value * jumBarang;
            totBarang = document.form1.totBarang.value;
        }
        updatetotal();
    }

    //hitung keyboard
    function keyboard(){
        if (document.form1.cek1.checked==true){
            document.form1.hargaKey.value = document.form1.cek1.value;
        } else {
            document.form1.hargaKey.value = null;
            document.form1.jumKey.value = null;
            document.form1.totKey.value = null;
            totKey=0;
        }
        updatetotal();
    }

    function hitKeyboard(){
        if (document.form1.cek1.checked==true){
            document.form1.totKey.value = document.form1.cek1.value * document.form1.jumKey.value;
            totKey = document.form1.totKey.value;
        } else {
            document.form1.hargaKey.value = null;
            document.form1.jumKey.value = null;
            totKey = 0;
        }
        updatetotal();
    }

    //hitung mouse
    function mouse(){
        if (document.form1.cek2.checked==true){
            document.form1.hargaMouse.value = document.form1.cek2.value;
        } else {
            document.form1.hargaMouse.value = null;
            document.form1.jumMouse.value = null;
            document.form1.totMouse.value = null;
            totMouse=0;
        }
        updatetotal();
    }

    function hitMouse(){
        if (document.form1.cek2.checked==true){
            document.form1.totMouse.value = document.form1.cek2.value * document.form1.jumMouse.value;
            totMouse = document.form1.totMouse.value;
        } else {
            document.form1.hargaMouse.value = null;
            document.form1.jumMouse.value = null;
            totMouse = 0;
        }
        updatetotal();
    }

    //hitung printer
    function printer(){
        if (document.form1.cek3.checked==true){
            document.form1.hargaPrint.value = document.form1.cek3.value;
        } else {
            document.form1.hargaPrint.value = null;
            document.form1.jumPrint.value = null;
            document.form1.totPrint.value = null;
            totPrint=0;
        }
        updatetotal();
    }

    function hitPrint(){
        if (document.form1.cek3.checked==true){
            document.form1.totPrint.value = document.form1.cek3.value * document.form1.jumPrint.value;
            totPrint = document.form1.totPrint.value;
        } else {
            document.form1.hargaPrint.value = null;
            document.form1.jumPrint.value = null;
            totPrint = 0;
        }
        updatetotal();
    }

    function updatetotal(){
        document.form1.total.value = parseInt(totBarang)+parseInt(totKey)+parseInt(totMouse)+parseInt(totPrint);
    }

    function updatediskon(){
        if (document.form1.diskon[0].checked == true) {
            diskon = document.form1.diskon[0].value;
            document.form1.diskon1.value = diskon * document.form1.total.value;
            diskon = document.form1.diskon1.value;
        } else {
            diskon = document.form1.diskon[1].value;
            document.form1.diskon1.value = diskon * document.form1.total.value;
            diskon = document.form1.diskon1.value;
        }
        jumBayar();
    }

    function jumBayar(){
        document.form1.jumBayar.value = document.form1.total.value - document.form1.diskon1.value;
    }

    function hitung(){
        var total = document.form1.jumBayar.value;
        document.writeln(
            "<div align=\"center\">"+
                "<table width=\"610\" border=\"1\">"+
                    "<tr>"+
                    "<td height=\"50\"><div align=\"center\"><strong><font size=\"+4\">Toko Komputer Ganjar</font></strong></font></div>"+
                    "</td></tr><tr><td><strong>Total harga:</strong></td>"+
                    "</tr>"+
                    "<tr>"+
                    "<td><div align=\"center\"><font size=\"+3\"><strong>Rp. "+total+"</strong></font></div></td>"+
                    "</tr>"+
                    "<tr>"+
                      "<td><input type=\"button\" value=\"Back\" onClick=\"history.go(-1);\"></td>"+
                    "</tr>"+
                 "</table>"+
            "</div>"
        );
    }

</script>
<style type="text/css">
<!--
.style1 {
    font-size: 36px;
    font-weight: bold;
}
-->
</style>
</head>

<body>
<div align="center">
  <form name="form1">
  <table width="610" border="1">
    <tr>
      <td height="50" colspan="4"><div align="center" class="style1">Toko Ganjar Ramadhan</div></td>
    </tr>

    <tr>
      <td width="150"><div align="left"><strong>Nama Barang</strong></div></td>
      <td width="144"><div align="center"><strong>Harga</strong></div></td>
      <td width="144"><div align="center"><strong>Jumlah Barang</strong></div></td>
      <td width="144"><div align="center"><strong>Total</strong></div></td>
    </tr>
    <tr>
      <td><select name="namaBarang" onchange="list()">
        <option value="0">- Pilih Barang -</option>
        <option value="4000000">Komputer</option>
        <option value="500000">Monitor</option>
        <option value="750000">LCD</option>
          </select> </td>
      <td><input type="text" name="hargaBarang" id="hargaBarang" disabled="disabled" /></td>
      <td><input type="text" name="jumBarang" id="jumBarang" onblur="hargabarang()" /></td>
      <td><input type="text" name="totBarang" id="totBarang" disabled="disabled" /></td>
    </tr>

    <tr>
      <td colspan="4"><strong>Aksesoris</strong></td>
      </tr>
    <tr>
      <td><input type="checkbox" name="cek1" value="150000" onclick="keyboard()" />         Keyboard</td>
      <td><input type="text" name="hargaKey" id="hargaKey" disabled="disabled" /></td>
      <td><input type="text" name="jumKey" id="jumKey" onblur="hitKeyboard()" /></td>
      <td><input type="text" name="totKey" id="totKey" disabled="disabled" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cek2" value="50000" onclick="mouse()"/>         Mouse        </td>
      <td><input type="text" name="hargaMouse" id="hargaMouse" disabled="disabled" /></td>
      <td><input type="text" name="jumMouse" id="jumMouse" onblur="hitMouse()" /></td>
      <td><input type="text" name="totMouse" id="totMouse" disabled="disabled" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cek3" value="450000" onclick="printer()" />
        Printer </td>
      <td><input type="text" name="hargaPrint" id="hargaPrint" disabled="disabled" /></td>
      <td><input type="text" name="jumPrint" id="jumPrint" onblur="hitPrint()" /></td>
      <td><input type="text" name="totPrint" id="totPrint" disabled="disabled" /></td>
    </tr>
    <tr>
<p>
</tr>
<table width="500" border="1">
      <table align="center"border="1"cellpadding="0"cellpacing="0"bordercolor="black">
    </tr>
      <td colspan="3"><strong>Total Barang</strong></td>
      <td><input type="text" name="total" id="total" disabled="disabled" /></td>
    </tr>
    <tr>
      <td colspan="4"><strong>Diskon</strong></td>
      </tr>
    <tr>
      <td colspan="3"><input name="diskon" type="radio" value="0.1" onclick="updatediskon()" /> 10%
              <input name="diskon" type="radio" value="0.15" onclick="updatediskon()" /> 15%</td>
      <td><input type="text" name="diskon1" id="diskon1" disabled="disabled" /></td>
    </tr>

    <tr>
      <td colspan="3"><strong>Jumlah Pembayaran</strong></td>
      <td><input type="text" name="jumBayar" id="jumBayar" disabled="disabled" /></td>
    </tr>
    <tr>
      <td colspan="4"><input type="button" name="Submit" value="Submit" onclick="hitung()"/>
        <input type="reset" name="Submit2" id="Submit2" value="Reset" /></td>
      </tr>
  </table>
  </form>
</div>
</body>
</html>

Tidak ada komentar:

Posting Komentar