tampilan awal
setelah di klik batal
warung.css
body {
margin: 10px auto;
width: 580px;
}
header,section,footer{
display:block;
border:1px solid blue;
}
header{
height:60px;
background : #4380d4;
}
section{
padding: 10px;
height:400px;
}
footer{
clear:both;
height:20px;
background : #4380d4;
}
warung.js
function JumlahTotal(){
var myForm=document.form1;
var total1;
var total2;
var total3;
var total4;
var total5;
total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);
myForm.JumTotal.value=total1+total2+total3+total4+total5;
}
function potongan(){
var myForm=document.form1;
if (myForm.JumTotal.value < 50000){
myForm.Diskon.value = 0;
}
else{
myForm.Diskon.value = 10000;
}
}
function JumlahBayar(){
var myForm=document.form1;
myForm.JumBayar.value = myForm.JumTotal.value - myForm.Diskon.value ;
}
function proses(){
JumlahTotal();
potongan();
JumlahBayar();
reset();
}
function reset(){
var elemen = document.pemesanan;
elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}
warung.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Warung Rung</title>
<script language="JavaScript" type="text/javascript" src="warung.js"></script>
<link rel="stylesheet" href="warung.css" type="text/css" />
</head>
<body>
<header>
<h1 align="center">WARUNG RUNG</h1>
</header>
<section>
<form name="form1" action="#">
<table border=1 cellpadding=3>
<tr>
<th>No.</th>
<th width = 200px >Makanan / Minuman </th>
<th width = 200px >Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1</td>
<td>Bakso Istimewa </td>
<td>@<input type="text" name="harga1" value="12000" readonly /></td>
<td><input type="text" name="pesan1" value="0" onChange ="proses()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial </td>
<td>@<input type="text" name="harga2" value="10000" readonly /></td>
<td><input type="text" name="pesan2" value="0" onChange ="proses()" /></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super </td>
<td>@<input type="text" name="harga3" value="15000" readonly /></td>
<td><input type="text" name="pesan3" value="0" onChange ="proses()" /></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan </td>
<td>@<input type="text" name="harga4" value="5000" readonly /></td>
<td><input type="text" name="pesan4" value="0" onChange ="proses()" /></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur </td>
<td>@<input type="text" name="harga5" value="7000" readonly /></td>
<td><input type="text" name="pesan5" value="0" onChange ="proses()" /></td>
</tr>
<tr>
<td colspan=3>Jumlah</td>
<td><input type="text" name="JumTotal" readonly /></td>
<tr>
<tr>
<td colspan=3>Diskon</td>
<td><input type="text" name="Diskon" readonly /></td>
<tr>
<tr>
<td colspan=3>Jumlah Dibayar</td>
<td><input type="text" name="JumBayar" readonly /></td>
<tr>
</table>
<br>
<!--<input type="button" value="Proses" onclick="proses()" />-->
<input type="button" name="batal" value="Batal" onclick="reset()"/>
</form>
</section>
<footer>
<center> © alifable </center>
</footer>
</body>
</html>
Tidak ada komentar:
Posting Komentar