Tags

, , ,

Pertama gue mau minta maaf kalo istilahnya salah. Yang gue maksud event tuh kejadian pas lu klik button atau pas lu klik checkbox atau sejenisnya…

Nah liat gambar di atas, harga dari masing-masing nama barang udah diatur sebelumnya. Event di sini berfungsi ketika lu pilih nama barang misalnya, maka secara otomatis field harga barang bakalan terisi tanpa lu harus teken button submit dulu. Lebih jelasnya liat aja kode di bawah :

<!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 Belanja Kamu adalah :</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>
      <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>

Selamat mencoba…!!!

Advertisements