<!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>
</head>
<body>
<script language="JavaScript" type="text/javascript"> 1:
2:
3: <!--
4:
5: function hitung(){
6:
7: var nt = document.form1;
8:
9: var hb = 12000 * parseInt(nt.Bakso.value);
10:
11: var hs = 10000 * parseInt(nt.Soto.value);
12:
13: var hm = 15000 * parseInt(nt.Mie.value);
14:
15: var hd = 5000 * parseInt(nt.Degan.value);
16:
17: var hc = 7000 * parseInt(nt.Campur.value);
18:
19: var jt = hb + hs + hm + hd + hc;
20:
21: if (jt > 50000){
22:
23: nt.Total.value = jt;
24:
25: nt.Diskon.value = 10000;
26:
27: nt.Bayar.value = jt - parseInt(nt.Diskon.value);
28:
29: } else {
30:
31: nt.Total.value = jt;
32:
33: nt.Diskon.value = 0;
34:
35: nt.Bayar.value = jt - parseInt(nt.Diskon.value);
36:
37: }
38:
39: }
40:
41: function resetForm(){
42:
43: document.form1.reset();
44:
45: }
46:
47: //-->
48:
</script>
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form1" action="#">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px">@ <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="Bakso" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="Soto" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<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>
<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>
<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">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html>