<!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"xml:lang="en"lang="en">
<head>
<title>Warung Jawa</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var nt = document.form1;
var hb = 12000 * parseInt(nt.Bakso.value);
var hs = 10000 * parseInt(nt.Soto.value);
var hm = 15000 * parseInt(nt.Mie.value);
var hd = 5000 * parseInt(nt.Degan.value);
var hc = 7000 * parseInt(nt.Campur.value);
var jt = hb + hs + hm + hd + hc ;
if (jt > 50000){
nt.Total.value = jt;
nt.Diskon.value = 10000;
nt.Bayar.value = jt - parseInt(nt.Diskon.value);
} else {
nt.Total.value = jt;
nt.Diskon.value = 0;
nt.Bayar.value = jt - parseInt(nt.Diskon.value);
}
}
function resetForm(){
document.form1.reset();
}
//-->
</script>
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form1" action="#">
<table width="512" border="1px">
<tr bgcolor="#FFCC33">
<th height="33">No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="20" bgcolor="#00FFFF">1</td>
<td width="200" bgcolor="#00FFFF">Bakso Istimewa</td>
<td width="85" bgcolor="#00FFFF">@
<input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="188" bgcolor="#00FFFF"><input type="text" name="Bakso" value="0" onchange="hitung()"/></td>
</tr>
<tr>
<td bgcolor="#00FF00">2</td>
<td bgcolor="#99CC99">Soto Spesial</td>
<td bgcolor="#3399FF">@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td bgcolor="#3399FF"><input type="text" name="Soto" value="0" onChange="hitung()"/></td>
</tr>
<tr bgcolor="#99FF99">
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="Mie" value="0" onChange="hitung()"/></td>
</tr>
<tr bgcolor="#99FFFF">
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="Degan" value="0" onChange="hitung()"/></td>
</tr>
<tr bgcolor="#FF9966">
<td>5</td>
<td>Es Campur</td>
<td>@
<input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="Campur" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="#000000"><span class="style1">Jumlah Total</span></td>
<td bgcolor="#000000">
<input type="text" name="Total" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="#000000"><span class="style1">Diskon</span></td>
<td bgcolor="#000000"><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="#000000"><span class="style1">Jumlah Dibayar</span></td>
<td bgcolor="#000000"><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table>
<br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html> |