Berikut adalah kode html yang telah disisipi JavaScript untuk membuat tampilan seperti di atas. <br /><!DOCTYPE html <br /> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br /> <br /><head> <br /> <title>Form Pemesanan Berbasis Java Script</title> <br /></head> <br /> <br /><body> <br /> <script language="Javascript" type="text/javascript"> <br /><!-- <br /> <br /> function calculate() { <br /> var nota = document.form1; <br /> var hargabakso = 12000 * eval(nota.pesan1.value); <br /> var hargasoto = 10000 * eval(nota.pesan2.value); <br /> var hargamie = 15000 * eval(nota.pesan3.value); <br /> var hargadegan = 5000 * eval(nota.pesan4.value); <br /> var hargacampur = 7000 * eval(nota.pesan5.value); <br /> var hargatotal = hargabakso + hargasoto + hargamie + hargadegan + hargacampur ; <br /> <br /> if (hargatotal > 50000){ <br /> nota.total.value = hargatotal; <br /> nota.diskon.value = 10000; <br /> nota.bayar.value = hargatotal- eval(nota.diskon.value); <br /> } <br /> else{ <br /> nota.total.value = hargatotal; <br /> nota.diskon.value = 0; <br /> nota.bayar.value = hargatotal; <br /> } <br /> } <br /> <br />//--> <br /></script> <br /><h2 align="left">Form Pemesanan Berbasis JavaScript</h2> <br /><form name="form1" action="#"> <br /><table border="1px"><tr> <br /> <th>No</th> <br /> <th>Makanan/Minuman</th> <br /> <th>Harga</th> <br /> <th>Pesan</th> <br /></tr> <br /><tr> <br /> <td width="25" align="center">1</td> <br /> <td width="150">Bakso Istimewa</td> <br /> <td width="150">@<input type="text" name="price1" value="12000" size="18" disabled="true"/></td> <br /> <td width="150"><input type="text" name="pesan1" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">2</td> <br /> <td width="150">Soto Spesial</td> <br /> <td width="150" >@<input type="text" name="price2" value="10000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan2" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">3</td> <br /> <td width="150">Mie Ayam Super</td> <br /> <td width="150">@<input type="text" name="price3" value="15000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan3" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">4 </td> <br /> <td width="150">Es Degan</td> <br /> <td width="150">@<input type="text" name="price4" value="5000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan4" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">5</td> <br /> <td width="150">Es Campur</td> <br /> <td width="150">@<input type="text" name="price5" value="7000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan5" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td colspan="3" align="right">Jumlah Total</td> <br /> <td><input type="text" name="total" value="0" size="21"/></td> <br /></tr> <br /><tr> <br /> <td colspan="3" align="right">Diskon*</td> <br /> <td><input type="text" name="diskon" value="0" size="21"/></td> <br /></tr> <br /><tr> <br /> <td colspan="3" align="right">Jumlah Dibayar</td> <br /> <td><input type="text" name="bayar" value="0" size="21"/></td> <br /></tr> <br /> <br /></table> <br /><h5 align="left">*Diskon 10.000 berlaku untuk pembelian di atas 50.000 dan tidak berlaku untuk kelipatannya.</h5> <br /><input type="submit" name="Batal" value="Batal" size="10" Onclick="reset()"/> <br /></form> <br /></body> <br /></html <br /> Jika ada yang kurang jelas silahkan tinggalakan komentar.
0 komentar:
Posting Komentar