Source HTML
<html lang="en">
<head>
<title>Form Pemesanan</title>
<script language="javascript" type="text/javascript">
var Dom = {
get: function(el) {
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el) {
var el = document.getElementById(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}(),
calc: function() {
var total = 0;
for (c = 0; c <= 20; c++) {
if (document.getElementById('mnu'+c)) {
var harga = parseInt(document.getElementById('mnu'+c).value);
var jml = parseInt(document.getElementById('qty'+c).value);
var subtotal = harga * jml;
total = total + subtotal;
document.getElementById('hrg'+c).value = harga;
document.getElementById('sub'+c).value = subtotal;
}
}
var disc = 0;
if (total > 50000) {
disc = 10000;
document.getElementById('dsc').value = disc;
}
document.getElementById('tot').value = total - disc;
}
};
Event.add(window, 'load', function() {
var i = 0;
Event.add('add-element', 'click', function() {
++i;
var el = document.createElement('tr');
el.id = "list_id"+ i;
var el_act = document.createElement('input');
el_act.id = "list_id"+ i;
el_act.type = "button";
el_act.value = "Batalkan";
var el_no1 = document.createElement('td');
var el_no2 = document.createElement('td');
var el_no3 = document.createElement('td');
var el_no4 = document.createElement('td');
var el_no5 = document.createElement('td');
el_no1.innerHTML = '<select id="mnu'+i+'">'+
'<option value="0">Pilih Menu</option>'+
'<option value="5000">Keripik Tempe</option>'+
'<option value="10000">Keripik Nangka</option>'+
'<option value="12000">Keripik Salak</option>'+
'<option value="8000">Keripik Apel</option>'+
'<option value="4500">Keripik Pisang</option>'+
'<option value="5000">Keripik Ubi</option>'+
'<option value="8000">Keripik Sukun</option>'+
'<option value="2500">Keripik Singkong</option>'+
'<option value="8500">Keripik Jamur</option>'+
'</select>';
el_no2.innerHTML = '<input id="hrg'+i+'" type="text" value="0" readonly>';
el_no3.innerHTML = '<input id="qty'+i+'" type="text" value="1">';
el_no4.innerHTML = '<input id="sub'+i+'" type="text" value="0" readonly>';
Dom.add(el_no1, el);
Dom.add(el_no2, el);
Dom.add(el_no3, el);
Dom.add(el_no4, el);
Dom.add(el_act, el_no5);
Dom.add(el_no5, el);
Dom.add(el, 'content');
Event.add(el_act, 'click', function(e) {Dom.remove(this.id); Event.calc();} );
Event.add(el, 'change', function(e) {Event.calc();} );
Event.calc();
});
});
</script>
</head>
<body>
<center>
<p>
<strong>FORM PEMBAYARAN BARANG DI PESAN </strong><br>
</p>
<table border="1px" cellspacing="0">
<tr bgcolor="#99FFFF" align="center">
<td><strong>Menu</strong></td>
<td><strong>Harga</strong></td>
<td><strong>Jml Beli</strong></td>
<td><strong>Sub Total</strong></td>
<td><strong>Keterangan</strong></td>
</tr>
<tbody id="content">
</tbody>
<tr bgcolor="#FFFF99">
<td colspan="2"></td>
<td><strong>Diskon</strong></td>
<td colspan="2"><input id="dsc" type="text" value="0"readonly"></td>
</tr>
<tr bgcolor="#99FFFF">
<td colspan="2"></td>
<td><strong>Total Bayar</strong> </td>
<td><input id="tot" type="text" value="0" readonly></td>
<td><input id="add-element" type="button" value="Tambah"></td>
</tr>
</table>
<p><input type="button" value="DARI AWAL" onClick="location.reload(true); Event.calc();"></p>
</center>
</body>
</html>
Tidak ada komentar:
Posting Komentar