Dan ini adalah script yang saya gunakan dalam membuat web tersebut diatas, dimana didalamnya terdapat JavaScript :
<!DOCTYPE html >
<html lang="en">
<head>
<title>Form Pemesanan</title>
</head>
<body bgcolor="gray">
<script language="JavaScript" type="text/javascript">
function jumlah() {
var myForm = document.form1;
var bakso = 12000 * eval(myForm.order1.value);
var soto = 10000 * eval(myForm.order2.value);
var mie = 15000 * eval(myForm.order3.value);
var degan = 5000 * eval(myForm.order4.value);
var campur = 7000 * eval(myForm.order5.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);
}
}
function resetForm(){
document.form1.reset();
}
</script>
<form name="form1" action="#">
<font size="6">Form Pemesanan Berbasis JavaScript</font>
<table border="2" cellspacing=0 cellpadding=5 >
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<thead valign="middle">
<tr>
<th width="20"><font color="black" size="4">No</font>
<th width="150"><font color="black" size="4">Makanan/Minuman</font>
<th width="170"><font color="black" size="4">Harga Satuan</font>
<th width="50"><font color="black" size="4">Pesan</font>
</tr>
<tbody>
<tr>
<td>1<td>Bakso Istimewa<td>@<input type="text" value="12000" disabled="true"/><td>
<input type="text" name="order1" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td>2<td>Soto Spesial<td>@<input type="text" value="10000" disabled="true"/><td>
<input type="text" name="order2" value="0" onChange="jumlah()" />
</tr>
<tr>
<td>3<td>Mie Ayam Super<td>@<input type="text" value="15000" disabled="true"/> <td>
<input type="text" name="order3" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td>4<td>Es Degan<td>@<input type="text" value="5000" disabled="true"/>
<td><input type="text" name="order4" value="0" onChange="jumlah()" />
</tr>
<tr>
<td>5<td>Es Campur<td>@<input type="text" value="7000" disabled="true"/> <td>
<input type="text" name="order5" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td colspan=3 align="right">Jumlah Total<td><input type="text" name="total" disabled="true"/>
</tr>
<tr>
<td colspan=3 align="right">Diskon<td><input type="text" name="diskon" disabled="true" />
</tr>
<tr>
<td colspan=3 align="right">Jumlah Bayar<td><input type="text" name="bayar" disabled="true"/>
</tr>
</table>
<br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html>
<html lang="en">
<head>
<title>Form Pemesanan</title>
</head>
<body bgcolor="gray">
<script language="JavaScript" type="text/javascript">
function jumlah() {
var myForm = document.form1;
var bakso = 12000 * eval(myForm.order1.value);
var soto = 10000 * eval(myForm.order2.value);
var mie = 15000 * eval(myForm.order3.value);
var degan = 5000 * eval(myForm.order4.value);
var campur = 7000 * eval(myForm.order5.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);
}
}
function resetForm(){
document.form1.reset();
}
</script>
<form name="form1" action="#">
<font size="6">Form Pemesanan Berbasis JavaScript</font>
<table border="2" cellspacing=0 cellpadding=5 >
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<thead valign="middle">
<tr>
<th width="20"><font color="black" size="4">No</font>
<th width="150"><font color="black" size="4">Makanan/Minuman</font>
<th width="170"><font color="black" size="4">Harga Satuan</font>
<th width="50"><font color="black" size="4">Pesan</font>
</tr>
<tbody>
<tr>
<td>1<td>Bakso Istimewa<td>@<input type="text" value="12000" disabled="true"/><td>
<input type="text" name="order1" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td>2<td>Soto Spesial<td>@<input type="text" value="10000" disabled="true"/><td>
<input type="text" name="order2" value="0" onChange="jumlah()" />
</tr>
<tr>
<td>3<td>Mie Ayam Super<td>@<input type="text" value="15000" disabled="true"/> <td>
<input type="text" name="order3" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td>4<td>Es Degan<td>@<input type="text" value="5000" disabled="true"/>
<td><input type="text" name="order4" value="0" onChange="jumlah()" />
</tr>
<tr>
<td>5<td>Es Campur<td>@<input type="text" value="7000" disabled="true"/> <td>
<input type="text" name="order5" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td colspan=3 align="right">Jumlah Total<td><input type="text" name="total" disabled="true"/>
</tr>
<tr>
<td colspan=3 align="right">Diskon<td><input type="text" name="diskon" disabled="true" />
</tr>
<tr>
<td colspan=3 align="right">Jumlah Bayar<td><input type="text" name="bayar" disabled="true"/>
</tr>
</table>
<br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html>
0 komentar:
Posting Komentar