lagi semangat ngerjain tugas nih,
seperti tertulis pada judul diatas,
berikut adalah contoh kode Form Pemesanan berbasis Javascript:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modul 4 Soal 1</title>
<script language="javascript" type="text/javascript">
<!--
function calculate() {
var harga = document.getElementsByName("harga");
var pesan = document.getElementsByName("pesan");
var jumlah = 0;
var diskon = 0;
for(i = 0; i < harga.length; i++) {
jumlah += harga.item(i).value * pesan.item(i).value;
}
document.getElementById("jumlah").value = jumlah;
if(jumlah > 50000) {
diskon = 10000;
}
else {
diskon = 0
}
document.getElementById("diskon").value = diskon;
document.getElementById("bayar").value = jumlah - diskon;
}
//-->
</script>
</head>
<body>
<h1>Form Pemesanan Berbasis Javascript</h1>
<form action="#" method="post" name="ourForm">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1</td>
<td>Bakso Istimewa</td>
<td>
@<input type="text" disabled size="10" value="12000" name="harga" />
</td>
<td>
<input type="text" size="10" value="0" name="pesan" onchange="calculate()" />
</td>
</tr>
<tr>
<td>2</td>
<td>Soto Special</td>
<td>
@<input type="text" disabled size="10" value="10000" name="harga" />
</td>
<td>
<input type="text" size="10" value="0" name="pesan" onchange="calculate()" />
</td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>
@<input type="text" disabled size="10" value="15000" name="harga" />
</td>
<td>
<input type="text" size="10" value="0" name="pesan" onchange="calculate()" />
</td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>
@<input type="text" disabled size="10" value="5000" name="harga" />
</td>
<td>
<input type="text" size="10" value="0" name="pesan" onchange="calculate()" />
</td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>
@<input type="text" disabled size="10" value="7000" name="harga" />
</td>
<td>
<input type="text" size="10" value="0" name="pesan" onchange="calculate()" />
</td>
</tr>
<tr>
<td colspan="3">Jumlah Total</td>
<td>
<input type="text" disabled size="10" id="jumlah" value="0" />
</td>
</tr>
<tr>
<td colspan="3">Diskon</td>
<td>
<input type="text" disabled size="10" id="diskon" value="0" />
</td>
</tr>
<tr>
<td colspan="3">Total Dibayar</td>
<td>
<input type="text" disabled size="10" id="bayar" value="0" />
</td>
</tr>
</table>
<br />
<input type="reset" />
</form>
</body>
</html>
Tampilannya?
Menarik? semoga bermanfaat :)
Tidak ada komentar:
Posting Komentar