Membuat Katalog dengan Penjumlahan Otomatis

Udah lama banget saya tidak berposting ria, karena kesibukan saya. Langsung aja ya... Bagi yang ingin membuat Blog untuk berdagang, alangkah baiknya jika Anda membuat Daftar Harga/ Katalog pada Blog Anda. Sehingga para calon pembeli dapat memperkirakan berapa biaya yang akan dikeluarkan untuk membeli barang-barang yang dijual pada Blog Anda. Apalagi kalo katalog yang Anda sediakan dapat menghitung/ menjumlahkan barang yang calon pembeli pilih.

Bagaimana? Anda penasaran bukan? Ini adalah contoh yang saya maksud.

Nama Barang	Kode	Harga (Rp)	Satuan	Beli
Batik Corak Anak	A1	50.000	pcs
Baju Corak Dewasa	A2	60.000	pcs
Estimasi belanja saya adalah...
Harga belum termasuk ongkos kirim

Apabila Anda tertarik, Anda copy paste script dibawah ini

<table width="578" border="1">
<script type='text/javascript'>
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<2; i++) {
gn = 'harga'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost').value = sum.toFixed(2);
}
</script>
<tr bgcolor="#999999">
<th scope="col">Nama Barang </th>
<th width="61" scope="col">Kode</th>
<th width="85" scope="col">Harga (Rp) </th>
<th width="58" scope="col">Satuan</th>
<th width="44" scope="col">Beli</th>
</tr>
<tr>
<td><a href="http://vicky-mode.blogspot.com/2009/12/batik-corak-anak.html">Batik Corak Anak </a></td>
<td><div align="center">A1</div></td>
<td><div align="right">50.000</div></td>
<td><div align="center">pcs</div></td>
<td><input type="checkbox" id='harga0' value="50000" onclick="UpdateCost()"></td>
</tr>
<tr>
<td><a href="http://vicky-mode.blogspot.com/2009/12/batik-corak-dewasa.html">Baju Corak Dewasa </a></td>
<td><div align="center">A2</div></td>
<td><div align="right">60.000</div></td>
<td><div align="center">pcs</div></td>
<td><input type="checkbox" id='harga1' value="60000" onclick="UpdateCost()"></td>
</tr>
<tr>
<td> </td>
<td><div align="center"></div></td>
<td><div align="right"></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td><div align="center"><strong>Estimasi belanja saya adalah... </strong></div></td>
<td><div align="center"></div></td>
<td><div align="right"><strong><input type="text" size="13" id="totalcost" value=""> </strong></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td colspan="5"><div align="center"><strong><em>Harga belum termasuk ongkos kirim </em><
/strong> </div></td>
</tr>
</table>

Yang perlu Anda ganti hanya berapa jumlah (i) nya. Kalo Anda punya 100 item barang yang akan dijual, maka jangan lupa Anda ganti (i) nya dengan 100 juga. Terus sesuaikan kata, kalimat atau angka yang berwarna merah dengan kebutuhan di Blog Anda. Selamat Mencoba...