Tampilan dari tabel yang dimaksud adalah sebagai berikut...
Untuk dapat membuat tabel formulir pemesanan seperti di atas kita memerplukan penggabungan antara tabel dengan JavaScript. Untuk mendownload syntax program tersebut, harap klik disini...
Untuk mendownload wallpaper yang digunakan pada program tersebut klik disini...
Syntax programmnya adalah sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">
<head>
<title>Tabel Menu</title>
</head>
<body background="p1.gif">
<script language="JavaScript" type="text/javascript">
function hitung() {
var myForm = document.form1;
var bakso = 12000 * eval(myForm.pesan1.value);
var soto = 10000 * eval(myForm.pesan2.value);
var mie = 15000 * eval(myForm.pesan3.value);
var degan = 5000 * eval(myForm.pesan4.value);
var campur = 7000 * eval(myForm.pesan5.value);
var hasil = bakso+soto+mie+degan+campur;
if (hasil > 50000) {
myForm.total.value = hasil;
myForm.diskon.value = 10000;
myForm.bayar.value = hasil - eval(myForm.diskon.value);
} else {
myForm.total.value = hasil;
myForm.diskon.value = 0;
myForm.bayar.value = hasil - eval(myForm.diskon.value);
}
myForm.hb1.value = bakso;
myForm.hb2.value = soto;
myForm.hb3.value = mie;
myForm.hb4.value = degan;
myForm.hb5.value = campur;
}
</script>
<form name="form1" action="#">
<font size="6" face="comic sans ms">Form Pemesanan Berbasis JavaScript</font>
<table border="2" cellspacing=0 cellpadding=5 summary="Tabel Menu" bgcolor="pink">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<thead valign="middle">
<tr bgcolor="black">
<th width="35"><font color="white" size="4">No</font>
<th width="200"><font color="white" size="4">Makanan/Minuman</font>
<th width="180"><font color="white" size="4">Harga Satuan</font>
<th width="100"><font color="white" size="4">Pesan</font>
<th width="150"><font color="white" size="4">Harga Barang</font>
</tr>
<tbody>
<tr>
<td>1<td>Bakso Istimewa<td>@<input type="text" name="hs1" value="12000"><td>
<input type="text" name="pesan1" value="0" onChange="hitung()"/><td><input type="text" name="hb1" />
</tr>
<tr>
<td>2<td>Soto Spesial<td>@<input type="text" name="hs2" value="10000" /><td>
<input type="text" name="pesan2" value="0" onChange="hitung()" /> <td><input type="text" name="hb2" />
</tr>
<tr>
<td>3<td>Mie Ayam Super<td>@<input type="text" name="hs3" value="15000" /> <td>
<input type="text" name="pesan3" value="0" onChange="hitung()"/> <td><input type="text" name="hb3" />
</tr>
<tr>
<td>4<td>Es Degan<td>@<input type="text" name="hs4" value="5000"/>
<td><input type="text" name="pesan4" value="0" onChange="hitung()" /> <td><input type="text" name="hb4" />
</tr>
<tr>
<td>5<td>Es Campur<td>@<input type="text" name="hs5" value="7000"/> <td>
<input type="text" name="pesan5" value="0" onChange="hitung()"/> <td><input type="text" name="hb5" />
</tr>
<tr>
<td colspan=4 align="right">Jumlah Total<td><input type="text" name="total" />
</tr>
<tr>
<td colspan=4 align="right">Diskon<td><input type="text" name="diskon" />
</tr>
<tr bgcolor="violet">
<td colspan=4 align="right">Jumlah Bayar<td><input type="text" name="bayar"/>
</tr>
</table>
<br/>
<br/>
<input type="reset" value="BATAL" />
</form>
</body>
</html>
0 komentar:
Posting Komentar