Senin, 21 Desember 2009

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...

10 komentar:

  1. wah.. terimaksih sob.. langsung tak copas. izin..

    BalasHapus
    Balasan
    1. Sama sama Sob.. Silahkan di modifikasi Sob..

      Hapus
  2. itu script berantakan -_-

    BalasHapus
    Balasan
    1. Iya.. ditata ulang lah..
      Kan cuman sedikit.

      Hapus
  3. kalo untuk tambahan diskon apa bisa mas???

    BalasHapus
    Balasan
    1. Bisa Mas, silahkan jenengan ubah aja script diatas form nya.. Saya sendiri belum pernah mencoba.

      Hapus
  4. Mantaf Mas...
    Salam Kenal dari Blog Coffee Gayo

    BalasHapus
    Balasan
    1. mas bisa tau alamat emailnya ?
      tolong send ke email saya : endra.gst@gmail.com

      andai saya punya form input simultan

      No harga qty jumlah
      1 100
      2 200
      3 50

      ketika diisi qty akan keluar jumlah otomatis harga* qty dan total jumlah di bawah....itu gimana javascriptnya tolong dibantu mass...buntu nih...

      Hapus
    2. Buat sebuah function yang digunakan untuk menghitung jumlah barang. Dimana jumlah tersebut merupakan perkalian antara quantity dengan harga.

      Contohnya seperti ini:

      Misalnya Anda membuat form dengan nama "Form", kemudian membuat sebuah input dengan nama masing-masing "Quantity", "Harga" dan "Jumlah". Maka dalam sebuah javascript nya Anda masukkan sebuah function seperti dibawah ini.

      function Perkalian()
      {
      var A = document.Form.Quantity.value;
      var B = document.Form.Harga.value;
      document.Form.Jumlah.value = A * B;
      }

      Jangan lupa untuk menggunakan onchange="Perkalian();" untuk menjalankan function tersebut, sehingga ketika kursor meninggalkan input tersebut otomatis nilai pada input "Jumlah" akan berubah dengan sendirinya.

      Untuk gambaran silahkan Anda melihat Kalkulator Jaminan TPS yang sudah saya buat pada postingan Mau Jadi Pengusaha TPS

      Hapus

Recent Posts

Recent Comment

Popular Posts

KenaliDia.Com